how to set different offset for each anchor when scrolling with jQuery

Question

I'm having a couple of sections on the page each with assigned sectionID. I've added jQuery function for scrolling to anchor point but I can't get all anchor points to show at the same place after scroll.

I have sections named health, medicine, finance, papers. Clicking on the "health" scrolls to the top of the health section but clicking on the "finance" link scrolls to finance section but with offset. It doesn't stop at the very top of the section.

The piece of script I have is as follows.

<script type="text/javascript"> 
/* show active navigation element */
jQuery(document).ready(function () {
jQuery(document).on("scroll", onScroll);

});

//get scroll position and handle class active
function onScroll(event){
    var scrollPos = jQuery(document).scrollTop()+450;
    jQuery('#nav li a').each(function () {
        var currLink = jQuery(this);
        var refElement = jQuery(currLink.attr("href"));
        if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
            jQuery('#nav li a').removeClass("active");
            currLink.addClass("active");
        }
        else{
            currLink.removeClass("active");
        }
    });
}

/* activate sticky navigation */
jQuery(document).ready(function() {  
   var stickyNavTop = jQuery('#nav').offset().top;  

   var stickyNav = function(){  
   var scrollTop = jQuery(window).scrollTop();  

   if (scrollTop > stickyNavTop) {   
       jQuery('#nav').addClass('sticky');  
   } else {  
       jQuery('#nav').removeClass('sticky');   
   }  
};  
stickyNav();  

jQuery(window).scroll(function() {  
    stickyNav();  
    });  
}); 
</script>

I found a similar question here, but I couldn't make it work with my code.

How do I control scroll offset for each anchor point with the jQuery I'm using?

Clément Jacquelin · Accepted Answer · 2018-05-22T15:01:58.693

1

I see that you have a Sticky Navigation stickyNav();, which may cause the probleme that you have with the offset.

In order to get the right offset for you anchor, you must take care to add the height of your sticky nav to your scroll action like this :

$(document).on('click', 'a[href^="#"]', function (event) {
    event.preventDefault();

    $('html, body').animate({
        scrollTop: $($.attr(this, 'href')).offset().top - 100
        // 100 is the sticky nav height
    }, 500);
});

See this post for more information : Smooth scrolling when clicking an anchor link

edited May 22 '18 at 15:01

answered May 22 '18 at 09:51

Clément Jacquelin

263
1
11

Hi Clément, where would I add this exactly? I've tried adding it above the `//get scroll position and handle class active` , but there's no visible effect on the frontend. – Mario83 May 22 '18 at 14:53
@Mario83 Hi, I've update my answer, you can put this (jQuery compatible) function on your code and it will do what you want. – Clément Jacquelin May 22 '18 at 15:02
thank you. That worked perfectly! Just a question though, what does 500 stand for? Does it also sets some kind of a distance in pixels? – Mario83 May 22 '18 at 18:14
500 is the time determining how long the animation will run :). http://api.jquery.com/animate/#animate-properties-options – Clément Jacquelin May 22 '18 at 19:36

how to set different offset for each anchor when scrolling with jQuery

1 Answers1