Home Forums Porto Template Scroll To Offset

This topic contains 1 reply, has 2 voices, and was last updated by  Support2 2 months ago. This post has been viewed 101 times

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #10027558

    multicoastmedia
    Participant

    Hello again and thank you for the AMAZING THEME! I continue to enjoy working with it!

    The page able has a scroll to anchor. If you go to “resources>holiday closures” it will scroll down to the link. There are two issues…

    1) The stick menu hides the anchor heading.
    2) The scrolling is very abrupt.

    The same behavior appears anywhere there are anchor links.

    Could I set an offset for the scroll?
    Could I change the scroll speed?

    I did try extending the ScrollTo plugin defaults, but I’m wondering if this only handles scroll to top.

    Thank you!!



    Template Version: 6.1.2
    #10027560

    Support2
    Keymaster

    Hello, thanks for the kind words 🙂

    You can use the data-hash attribute to create a fluid scroll to anchor.

    1) First make sure the script jquery.easing.min.js is present on the server. Currently the script returns error 404 (not found):
    http://test.seacomm.org/vendor/jquery.easing/jquery.easing.min.js

    2) Change the menu item HTML to:

    <li><a class="dropdown-item" href="#holiday" data-hash data-hash-offset="100">Holiday Closures</a></li>

    * You can change the offset value. This is the space between element destination and header.

    To make the scroll to anchor works when open the page from another page like href="info.html#holiday", you can use the custom code below at (js/custom.js):

    $(window).on('load', function() {
        if(window.location.hash) {
            if($(window.location.hash).get(0)) {
    
                var target = window.location.hash,
                    offset = ( $(window).width() < 768 ) ? 180 : 90;
    
                $('body').addClass('scrolling');
    
                $('html, body').animate({
                    scrollTop: $(target).offset().top - offset
                }, 600, 'easeOutQuad', function() {
                    $('body').removeClass('scrolling');
                });
    
           }
        }
    });

    * “180” is the offset value for mobile.
    * “90” is the offset value for desktop.
    * You can try with different values, depending the height of your menu.

    Please, try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


Viewing 2 posts - 1 through 2 (of 2 total)