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插件并尝试使用以下代码..

添加＆＃39;内部链接＆＃39;用目标锚定的类。

$('.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

网站滚动问题

2 个答案: