CODEWITHSUNDEEP
javascripthtml
user13971133
user13971133

Reputation:

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

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

Upvotes: 0

Views: 10830

Answers (2)

The Fool
The Fool

Reputation: 20467

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>

Upvotes: 0

Icculus018
Icculus018

Reputation: 1066

There must be something in the class on the 'a' element to make the link not clickable. Try to do it this way:

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

Upvotes: 0

Related Questions