网站滚动问题

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