My take on dealing with # hashtag...

User 2823310 Photo


Registered User
312 posts

When you click on a default # link in RSD (or any html page)
it'll cause the page to jump to the top in most browsers.
There are a couple of ways to deal with this...

Button
One way is to use a button (not a button link) you could style those to look like just text for example. The problem there though is you can't right click on those to open in a new tab, but it is one the best ways

#no-link
Those # links are meant to be anchors but you can stop the default jump to the top by adding #no-link that does add a history to your link though, if you look in the browser address you'll see those. Any #name would work for that a common one is #0 since ID's can't use a zero

jQuery
Another option is to use a line of jQuery in your page FOOTER (foundation use jQuery)

With a class
This solution will stop the jump to the top and not add the hashtag link to your history on all of the page anchors with the class nolink
<script>
$('a.nolink').click(function(e) {e.preventDefault(); });
</script>

On all # anchors
This solution will stop the jump to the top and not add the hashtag link to your history on all of the page anchors
<script>
$('a[href="#"]').click(function(e) {e.preventDefault(); });
</script>

Smooth Scrolling
Now when you do use a page anchor you probably don't like how it automatically jumps to that ID you can make those scroll slower
If you use foundation you can use the built in Smooth Scroll
That also has the prevent default script built into it so it stops the history on the link
If you use the original coffeegrinder grid or prefer more control I also have a script you can add jQuery Page Scroll
User 379556 Photo


Registered User
1,603 posts

Interestingly I have used just "javascript:;" without the inverted commas instead of the hash sign, and that does seem to prevent the jumping to the top in browsers I've tested. The colon followed by the semi-colon are important.

I've no idea why it should work, but I read it somewhere, and was pleased with the result. Are there perhaps browsers for which it doesn't work, or does it create other problems please?

Frank
User 2823310 Photo


Registered User
312 posts

That would work for inline javascript but I think the proper code is to replace the # with
javascript:void(0);

User 379556 Photo


Registered User
1,603 posts

Thanks.

Since I prefer not to use things I don't understand (even when they work, or seem to work), I have in mind to switch to using the "button (not a button link)" solution mentioned in the first post in this thread.

Frank

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.