Warm tip: This article is reproduced from stackoverflow.com, please click
html javascript

How to add a 'link back to homepage button' in HTML?

发布于 2021-02-13 10:11:59

I am trying to build my first blog webpage.

The code I wrote so far at the bottom of the question.

I wish it has a function when I click "my name" or "Home" it can turns to the very beginning main page. And when I click "Blog", it can link to the area where has picture or word contains.

However, so far my code does not have such function, instead, they just display as words (cannot click).

This is the template I tried to followed

And after comparing it, I find that I need to have href: / in order to make them as button. And also I realise their link is for example "https://www.personname.com/".

However, it makes me feels like that I should first has a personal webpage in order to put that link as a back to home page button. But...that is what I am doing, I am trying to build a webpage...

I tired add the code below and it links to a wrong position. :(

<a href="/">
                "Home"
                <span class="sr-only">(current)</span>
              </a>

enter image description here

I also tried to have a button feature, but it display as this grey trangle box in the picture and cannot click as well.

How can I fix this problem?

enter image description here

And below are the code I wrote so far

Questioner
Zhao
Viewed
0
The Fool 2020-10-15 03:42

You can use named anchor tags to get this behavior.

html {
  scroll-behavior: smooth;
}
<a name="top"></a>
<a href="#top">Home</a>
<a href="#blog">Blog</a>

<section style="height: 100vh">
  <h1>Welcome Home</h1>
</section>

<section style="height: 100vh">
  <a name="blog"></a>
  <h1> Blog </h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>

  <a href="#top">Back to Top</a>
</section>