Smooth scroll anchor link

2

The following JS is intended to promote smooth scrolling when we click on anchors in a one-page site. Is it possible to restrict the performance of it only at resolutions higher than 760px?

$(document).ready(function () {
    function filterPath(string) {
        return string
            .replace(/^\//, '')
            .replace(/(index|default).[a-zA-Z]{3,4}$/, '')
            .replace(/\/$/, '');
    }
    $('a[href*=#]').each(function () {
        if (filterPath(location.pathname) == filterPath(this.pathname)
                && location.hostname == this.hostname
                && this.hash.replace(/#/, '')) {
            var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) + ']');
            var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
            if ($target) {
                var targetOffset = $target.offset().top;
                $(this).click(function () {
                    $('html, body').animate({scrollTop: targetOffset}, 300);
                    return false;
                });
            }
        }
    });
});
    
asked by anonymous 24.02.2015 / 20:51

1 answer

4

Just change this snippet of your code:

$(this).click(function () {
   if($(window).width() > 760){
      $('html, body').animate({scrollTop: targetOffset}, 300);
      return false;
   }
});

Example I needed to put the code in JSFiddle because it does not work as it should in the snippet of StackOverflow. To reproduce, simply decrease the result frame to a size < 200.

    
24.02.2015 / 21:14