-1

At the bottom of my scrollable page I got a button "back to top" and I am unsure about just using href="#" for doing that job. I know about some functions/scripts solving the same too, but I am very attracted to that very easy way.

So my question is: What are the concrete disadvantages or dangers of using href="#" if it's about the scrolltotop-job?

tiffsen
  • 27
  • 4
  • 1
    https://stackoverflow.com/questions/134845/which-href-value-should-i-use-for-javascript-links-or-javascriptvoid0?rq=1 – j08691 Jun 12 '18 at 20:52
  • 1
    Your button will only work once unless the user interacts with another anchor in the interim. – Etheryte Jun 12 '18 at 20:53
  • Possible duplicate of [Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?](https://stackoverflow.com/questions/134845/which-href-value-should-i-use-for-javascript-links-or-javascriptvoid0) – Simon Dugré Jun 12 '18 at 20:56
  • what about this? https://www.computerhope.com/issues/ch001475.htm – rhavelka Jun 12 '18 at 20:58
  • You can safe use href="#" but it will jump to top without any animation. Animations is main purpose that these scripts are used. – emtei Jun 12 '18 at 20:58
  • ah good to know! the button just working once is not nice of course.. animations I dont need so far.. – tiffsen Jun 12 '18 at 20:58

1 Answers1

1

The anchor tag is used for navigation inside a page. If you leave this empty the normal behaviour will be to scroll to the top of the page. You are litterly linking to a dead end and this is a bad behaviour. I would recommend adding a vissualy hidden span on top of your page and giving this div an ID. This way you can refer to this ID in your href. With a scroll-behavior: smooth property you can add a really smooth scroll function this way

Other solutions will be javascript. 

div{ height: 100vh; }
a { position: fixed; top: 50%; left: 50vh; }
#upper{ position: absolute; top: 0; }
<span id="upper"></span>
<div><h1>Title</h1></div>
<div><h1>Title</h1></div>
<div><h1>Title</h1></div>
<div><h1>Title</h1></div>
<div><h1>Title</h1></div>
<a href="#upper">Back to top</a>
Dennis Spierenburg
  • 613
  • 2
  • 6
  • 16