Search code examples
htmlanchorhashtag

How can I stop pages from scrolling with an empty hyperlink jump?


On Tumblr and a few other websites, when you scroll X amount of pixels vertically, an arrow appears that takes you to the top, with a anchor link. (I believe that is the correct term.) They're basically <a> tags with a href attribute of #.

In my opinion, anchor link are a lot 'cleaner' looking than your "javascript:void(0); more code goes here..."

In addition to the anchor link on Tumblr to scroll to the top, there are many pieces of GUI elements in web pages that use a "blank hashtag link", but they aren't used for scrolling, but rather, clean, empty hyperlinks. When THEY are clicked on, they do not scroll the page to the top, but instead, call a JavaScript function to display an element, do a task, etc.

As far as I know, these links have no JavaScript events attached to stop scrolling. (Ex. onclick="window.event.preventDefault()".

Am I missing something?

EDIT:

My personal issue that I'm facing is that I want to have an empty hyperlink (on my top navigation bar), but I don't want the page to scroll to the top when it is clicked on (the default action in probably every browser). How to fix with/without JavaScript?

EDIT:

Possible fix for this issue. Non-JavaScript: Fix an element's position with the coordinates (0,0), and link the empty links to it. (But it still wouldn't be empty :()


Solution

  • A simple solution to this would simply put in the a tag:

    <a href="#a">Title</a>
    

    In doing this, it won't scroll your page back to the top. To have it scroll back to the top, take out the a after the # symbol...so it would look like this:

    <a href="#">Title</a>
    

    That is the best explanation I can give you without any code provided from you.

    Give that a try and it should work with what you are asking for...No javascript is needed. In fact you can even make the #a jump to a different location if you'd like on your page :)