0

I have looked up quite a few solutions on my problem but could not apply any solution to script below. I need to adjust the script so when the user scrolls based on a link it will scroll the the target plus 100 px so the top menu is not covering the section (my menu is 100 px height)

$(document).ready(function () {
    $(document).on("scroll", onScroll);
    $('a[href^="#"]').on('click', function (e) {
        e.preventDefault();
        $(document).off("scroll");
        var target = this.hash;
        $target = $(target);
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top
        }, 500, 'swing', function () {
            window.location.hash = target;
            $(document).on("scroll", onScroll);
        });
    });
});
Dreamwalker
  • 3,032
  • 4
  • 30
  • 60
Alex Specs
  • 1
  • You need to scroll **minus** 100px so you leave space on top for menu. So `$target.offset().top-100` – Janez Oct 05 '15 at 14:30
  • @Janez thanks for the quick reply. I did what you mentioned but somehow the scroll jumps back to 0. It looks like something is overwriting the -100 px – Alex Specs Oct 05 '15 at 14:36
  • probably its this part of the script that needs to be edited in order to do the offset function onScroll(event){ var scrollPosition = $(document).scrollTop(); $('.nav li a').each(function () { var currentLink = $(this); var refElement = $(currentLink.attr("href")); – Alex Specs Oct 05 '15 at 14:41
  • see [here](http://stackoverflow.com/questions/9068587/accounting-for-a-fixed-header-with-animate-scrolltop-and-target-offset-top) for similiar approach for solving this – Janez Oct 05 '15 at 14:43
  • thanks @Janez much appreciated – Alex Specs Oct 05 '15 at 14:45

0 Answers0