网站滚动问题

Question

I'm having some issues with the scrolling on my website. It seems when you click links they go to the correct page, but if you then try to scroll up and down it doesn't do so properly, it jumps to the top.

For example on my page, if you click 'start your adventure', then scroll up, it jumps. Same with the image links.

I've tried adding jquery smooth scroll https://raw.githubusercontent.com/kswedberg/jquery-smooth-scroll/master/jquery.smooth-scroll.js then the following JS on my site:

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

I don't mind if the smooth scrolling doesn't work, as long as users can scroll properly without this jumping it would be good

Answer 1

Try this solution...

Remove smoothScroll plugin and try to user below code..

Add 'inner-link' class to anchor with target.

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

I would remove the plugin and use the following 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();
});

Then for any links you want to smooth scroll add the class scroll-on-page-link .

Source: http://refills.bourbon.io/#er-toc-id-14