Smooth Scrolling anchor with offset (jquery)

Question

Im using the following code to add smooth scrolling for anchors on my site. Because i have a sticky header id like to offset this by say 200px

$('a[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
        if (target.length) {
            $('html, body').animate({
                scrollTop: target.offset().top
            }, 1000);
            return false;
        }
    }
});

score 12 · Accepted Answer · answered Jun 17 '16 at 13:43

Try add or remove a value in the scrollTop animation

$('a[href*="#"]:not([href="#"])').click(function() {
    var offset = -200; // <-- change the value here
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
        if (target.length) {
            $('html, body').animate({
                scrollTop: target.offset().top + offset
            }, 1000);
            return false;
        }
    }
});

This solution works nicely, but it does not change the URL to #anchor. So the user cannot link directly to the url with anchor. — Avatar, Aug 21 '19 at 06:15

score 4 · Answer 2 · answered Jul 16 '19 at 15:20

4

A simpler example with no hash is:

$(document).on('click', 'a[href^="#"]', function (event) {
    event.preventDefault();
    $('html, body').animate({
        scrollTop: $($.attr(this, 'href')).offset().top + -200
    }, 1000);
});

answered Jul 16 '19 at 15:20

BlueDogRanch

721
1
16
43

Smooth Scrolling anchor with offset (jquery)

2 Answers2