ComputerWolf / SlickNav

Responsive Mobile Menu Plugin for jQuery
MIT License
939 stars 314 forks source link

How to make it scroll to target #42

Closed framelita closed 10 years ago

framelita commented 10 years ago

Currently i'm using smooth-scroll for the desktop version. It just requires me to add data-scroll to the anchor like: Profile

But when it converted into slicknav, the data-scroll not working.

in the javascript I tried to add data-scroll too: var wrapElement = $('<'+settings.parentTag+' data-scroll role="menuitem" aria-haspopup="true" tabindex="-1" class="'+prefix+'_item"/>'); However it doesn't do anything.

Do I need to put .scrollTo anywhere inside the javascript to make it works?

ComputerWolf commented 10 years ago

The SlickNav website is currently using smooth-scroll as well. Because some links are internal and some are external, I added a class scroll to the links which should smooth scroll. This class is then preserved with the SlickNav. In my example, #main-menu is the original menu which is hidden when on mobile. This also calculates the offset so that the content is not cutoff on scroll. This is a simplified version of what I use:

$(document).on('click', "#main-menu .scroll, .slicknav_menu .scroll", function() {
    e.preventDefault();
    var h = $('#main-menu').outerHeight();
    if (!$('#main-menu').is(":visible")) {
        h = $('.slicknav_menu .slicknav_btn').outerHeight();
    }
    var link = this;
    $.smoothScroll({
        offset: -h,
        scrollTarget: link.hash
    });
});