網站滾動問題

Question

我在我的網站上滾動時遇到了一些問題。看起來，當你點擊鏈接到正確的頁面，但如果你然後嘗試上下滾動它不正確，它跳轉到頂部。

例如在我的頁面上，如果你點擊「開始你的冒險」，然後向上滾動，它會跳躍。與圖片鏈接相同。

我已經試過我的網站上添加的jQuery平滑滾動https://raw.githubusercontent.com/kswedberg/jquery-smooth-scroll/master/jquery.smooth-scroll.js 那麼下面的JS：

$(document) 
    .on('click', 'a[href*="#"]', function() { 
     if (this.hash && this.pathname === location.pathname) { 
     $.bbq.pushState('#/' + this.hash.slice(1)); 
     return false; 
     } 
    }) 
    .ready(function() { 
     $(window).bind('hashchange', function(event) { 
     var tgt = location.hash.replace(/^#\/?/,''); 
     if (document.getElementById(tgt)) { 
      $.smoothScroll({scrollTarget: '#' + tgt}); 
     } 
     }); 

     $(window).trigger('hashchange'); 
    }); 

如果平滑滾動不起作用，只要用戶可以正常滾動，我不介意沒有這個跳躍這將是很好

Answer 1

嘗試這種解決方案

刪除smoothScroll插件，並嘗試下面的用戶代碼..

添加'inner-link'類以錨定目標。

$('.inner-link').on('click', function(e) { 
    var target = $(this.hash); 
    if(target.length) { 
    event.preventDefault(); 
    $('html, body').animate({ 
     scrollTop: target.offset().top 
    }, 1000); 
    return false; 
    } 
    }); 

Answer 2

我會刪除插件，並使用以下的jQuery：

(function (jQuery) { 
    jQuery.mark = { 
    jump: function (options) { 
     var defaults = { 
     selector: 'a.scroll-on-page-link' 
     }; 
     if (typeof options == 'string') { 
     defaults.selector = options; 
     } 

     options = jQuery.extend(defaults, options); 
     return jQuery(options.selector).click(function (e) { 
     var jumpobj = jQuery(this); 
     var target = jumpobj.attr('href'); 
     var thespeed = 1000; 
     var offset = jQuery(target).offset().top; 
     jQuery('html,body').animate({ 
      scrollTop: offset 
     }, thespeed, 'swing'); 
     e.preventDefault(); 
     }); 
    } 
    }; 
})(jQuery); 


jQuery(function(){ 
    jQuery.mark.jump(); 
}); 

那麼對於要平滑滾動添加類scroll-on-page-link任何鏈接。

來源：http://refills.bourbon.io/#er-toc-id-14