Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to prevent page "jump" if anchor is in the URL when page loads?

Tags:

jquery

How to prevent with jQuery default browser behavior, jump to anchor if anchor is in the link when page loads?

var myLink = document.location.toString();

if (myLink.match('#')) {
 $('html, body').animate({ scrollTop: 0 }, 0); // OR
 $(window).scrollTop();
}

Or.... can't find solution... searched... and searched

like image 787
Bobo Avatar asked Sep 20 '11 15:09

Bobo


People also ask

How do I stop clicking links from jumping to top of page?

Just use "#/" instead of "#" and the page won't jump. Save this answer.

How could you prevent a click on an anchor from going to the link?

How could you prevent a click on an anchor from going to the link? To prevent an anchor from visiting the specified href, you can call the Event interface's preventDefault() method on the anchor's click handle.

What is overflow anchor?

The overflow-anchor CSS property provides a way to opt out of the browser's scroll anchoring behavior, which adjusts scroll position to minimize content shifts. Scroll anchoring behavior is enabled by default in any browser that supports it.

How do I stop anchor tags?

To disable a HTML anchor element with CSS, we can apply the pointer-events: none style. pointer-events: none will disable all click events on the anchor element. This is a great option when you only have access to class or style attributes. It can even be used to disable all the HTML links on a page.


2 Answers

use return false / event.preventDefault on your links

var myLink = document.location.toString();

if (myLink.match('#')) {
    $('html, body').animate({ scrollTop: 0 }, 0); // OR
    $(window).scrollTop();
    return false;
}

Or do you mean that you want o smooth scroll to the position of the ID you are refering to in your hash sign?

after reading your comments ignore this message.

maybe like this: http://jsbin.com/ajafor/4#hello

like image 140
voigtan Avatar answered Sep 30 '22 19:09

voigtan


<a href="#" class="link">link Text</a>
$(function()
{
    $('a.link').attr('href','javascript:void(0);')
});

or add manually

<a href="javascript:void(0);" class="link">link Text</a>
like image 26
Sanooj Avatar answered Sep 30 '22 21:09

Sanooj