• Hello everybody!

    I have a question: How can I change the offset-value which is used as target in the “page-scroller” function in “/inc/assets/js/theme-script.js” ?

    More details here:

    I made a website with the bootstrap scroll-spy navbar because the customer’s site is very small and has not much content.
    Here more info about scroll-spy:(https://getbootstrap.com/docs/4.0/components/scrollspy/

    I changed the navbar id to “nav nav-pills”, added a data-spy and a data-target element to the body tag and changed the “nav-link” class in the new walker class to “nav-link page-scroll-tk”. “page-scroll-tk” is my custom scroll-to-hash function. It is a copy of the “page-scroller” function of the theme, but it has no CSS that increases the size of those elements.

    Now everything works fine. But there is one thing that I want to change. The navbar of the website is fixed and when scrolling to sections, the beginning of the section is not visible. So I want to scroll to the target – 100px.

    I tried this here, but it did not work:

    $(‘.page-scroll-tk’).on(‘click’, function (f) {
    f.preventDefault();
    var target = this.hash;
    var $target = $(target);
    var $newtarget = $target.offset().top;
    var $newertarget = $newtarget – 200;
    $(‘html, body’).animate({
    ‘scrollTop’: $newertarget
    }, 1000, ‘swing’);
    });

    (I added a second variable called newtarget, which gets the offset of target. Then I added another variable which gets the $newtarget – 200. Last but not least I added $newertarget as the new target for scrollTop. The original code is here:

    $(‘.page-scroller’).on(‘click’, function (e) {
    e.preventDefault();
    var target = this.hash;
    var $target = $(target);
    $(‘html, body’).animate({
    ‘scrollTop’: $target.offset().top
    }, 1000, ‘swing’);
    });

    Thank you for your time and help!

    The page I need help with: [log in to see the link]

  • The topic ‘Change offset of page-scroller method’ is closed to new replies.