网站滚动问题

Website scrolling issues

本文关键字：问题 滚动 网站      更新时间：2023-09-26

我在网站上滚动时遇到了一些问题。当你点击链接时，它们似乎会转到正确的页面，但如果你尝试上下滚动，它不会正确地滚动，它会跳到顶部。

例如，在我的页面上，如果你点击"开始你的冒险"，然后向上滚动，它就会跳起来。与图像链接相同。

我已经尝试添加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');
    });

如果平滑滚动不起作用，我不介意，只要用户能够在没有这种跳跃的情况下正确滚动，这将是一个很好的

尝试此解决方案。。。

删除smoothScroll插件并尝试使用以下代码。。

将"内部链接"类添加到具有目标的锚点。

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

我会删除插件并使用以下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

相关文章：