jquery scroll to element issue

Question

I have issue with fixed navigation and scrolling to element position. What this does is, if I click on the link ( anchor ) it scrolls slowly before element as i wish , but then it jumps a few pixels down. Problem is with -> $target.offset().top -50 // if I remove negative value ( -50 ) window scrolls to element but my fixed navigation cover the element little bit but there is no jump... and i if i add negative value window scrolls before element but then it's forced to jump down and I really don't know why....

$(".anchor").each(function () {
             $(this).click(function(e) {
            e.preventDefault();
            var target = this.hash;
                $target = $(target);

                $('html, body').animate({
                    scrollTop:  $target.offset().top -50
                }, 2000, function () {
                        window.location.hash = target;
                 });
            });
        })

muecas · Accepted Answer · 2018-05-26 16:44:52Z

1

The problem is not the -50 offset; the problem is about setting the hash after the animation is completed. That will make the page jump to the original hash position. You need to remove adding the hash when the animation is completed:

$(".anchor").each(function () {
    $(this).click(function(e) {
        e.preventDefault();
        var target = this.hash;
        $target = $(target);
        $('html, body').animate({
            scrollTop:  $target.offset().top - 50
        });
    });
});

answered May 26, 2018 at 16:44

muecas

4,3251 gold badge10 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Lion Dirty Over a year ago

Thanks very much : )

Collectives™ on Stack Overflow

jquery scroll to element issue

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related