CODEWITHSUNDEEP
jqueryanchor
A. Z.
A. Z.

Reputation: 736

How to prevent jump on an anchor click?

I use e.preventDefault(); to disable default anchor behaviour.

Is there a way to prevent only jump action to a target on click?

I tried:

  var hash = window.location.hash;
  var link = $('a');
  $('a').click(function() {
    e.preventDefault();
    hash = "#"+link.attr("href");
  });

But it doesn't work: http://jsfiddle.net/ynts/LgcmB/.

Upvotes: 14

Views: 55838

Answers (9)

Anthony Woodworth
Anthony Woodworth

Reputation: 16

On your toggle or whatever when you don't want the scroll to trigger this guy I found has a good solution here that i added to for my use case. https://ben.page/js-remove-hash

here's what i did to remove the hash and prevent the jump (scrollLeft: how far you've scrolled horizontally. scrollTop you can get the gist (vertically))

const removeHashAndPreventJump = () => {
   const { scrollTop, scrollLeft } = document.documentElement;
   window.location.hash = ''; //clear hash
   window.scrollTo(scrollLeft, scrollTop);
}

Upvotes: 0

AgnosticDev
AgnosticDev

Reputation: 1853

You need to pass the event on the function.

var hash = window.location.hash;
var link = $('a');
//pass event here
$('a').click(function(e) {
    e.preventDefault();
    hash = "#"+link.attr("href");
});

Upvotes: 2

TaeKwonJoe
TaeKwonJoe

Reputation: 1167

This is the only solution I could come up with that works consistently across all desktop and mobile browsers or webviews with various client UI libraries and frameworks. By getting the window coordinates before scrolling occurs we can revert and maintain the current scroll position.

$('a').click(function (e) {
    var x = window.pageXOffset,
        y = window.pageYOffset;
    $(window).one('scroll', function () {
        window.scrollTo(x, y);
    })
});

Upvotes: 17

TV-C-1-5
TV-C-1-5

Reputation: 714

Add any string after the hash:

<a href="#anystring">

Upvotes: -1

Daniel
Daniel

Reputation: 515

After first trying the other answers on this page, this was all I needed:

  $('a').click(function (e) {
    e.preventDefault();
  });

Upvotes: 1

Fanky
Fanky

Reputation: 1786

You can use match with ^ to detect starting with #

$("a:link").on("click", function(e){
    if($(this).attr("href").match("^#")) {
        e.preventDefault();
        //some other stuff you want to do with the hash, like smooth scroll to anchor
        $('html, body').animate({ scrollTop: $($(this).attr("href")).offset().top }, 'fast');
    }
});

Upvotes: 0

jumois
jumois

Reputation: 97

To only prevent the "jump" you have to use different id for the target element than what is specified in the anchor.

e.g. for a link to a new tab use,

<a href="#new" />

and for the target element mask the id

<div id="new-tab"></div>

Then in your script append the mask to the real hash, and use it to get the element.

$(window).on("hashchange", function(){
    var hash = this.location.hash;
    var mytab = $(hash + "-tab");
});

This preserves the hash location changes in browser history that can be controlled by the back/forward buttons, and detected on page load with the hashchange event if user enters the page with hash specified.

Upvotes: 5

Sergei Smirnov
Sergei Smirnov

Reputation: 151

You should bind an onclick event to anchor and specify return false; as a result. The return false; statement causes default click behaviour (jump) would not work. You can find more info here: How to disable anchor "jump" when loading a page?

Upvotes: 3

Talha Akbar
Talha Akbar

Reputation: 10030

$(document).ready(function() {
  var hash = window.location.hash;
  var link = $('a');
  $('a').click(function(e) {
    e.preventDefault();
    hash = link.attr("href");
    window.location = hash;
  });
});

You also have to specify event argument in the function. By naming it as e or event and then you can manipulate it.

Upvotes: 28

Related Questions