jQuery - scroll function - offset()

Hi,
I have got a function, which is scrolling me to a section of web.
I was trying to add px value. to offset({top:200,left:0}), but then, is happend something strange - the header of website is overruning to the section.
How can I properly add px value to this code below?
Thank you in advance.

var $j = jQuery.noConflict();

var scrollToSection = function(event) {
    var href = $j(this).attr('href');
    if(typeof href === 'string' && href.trim().substr(0, 1) === '#'){
        var px = $j(href).offset().top;
        event.preventDefault();
        console.log('Scrolling to ' + href + ' at position ' + px + 'px');
        $j('html, body').animate({
            scrollTop: px
        }, 750);

        return false;
    }
};

$j(document).on('click', 'a', scrollToSection);


so… i’m confused.

The idea of this code is to scroll you -to the point- in the webpage that the link refers to.

You want instead to scroll to that point + 200 px? Why not just… put the anchor link where you actually want the thing to scroll to?

Anyway, stick a +200 on the scrollTop line.

1 Like

Hi,
Thank you for your time.
The web was built on WP and plugins, that’s way I couldn’t put the id anchor link there.

I resolved my problem by adding:

var px = $j(href).offset().top - 180;

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.