Question

我遇到了jQuery平滑滚动的问题。我有一个我要通过锚点滚动到不同DIV的一个按钮。不允许手动从一个DIV滚动到另一个DIV。为了解决这个问题，我在整个页面上禁用滚动，但是在点击我的菜单按钮的同时将其设置为正常一段时间。

它的工作原理如下：一旦你进入网站，你会看到我的第一个DIV内容。当您点击菜单中的链接时，您会看到一个简短的动画，其中图像离开DIV，而页面滚动到下一个DIV。在第二个DIV中，一个图像动画并且文本滚动。第一次它工作但当我想在另一个链接上滚动滚动工作但在右DIV一秒后页面跳回到顶部（到第一个DIV）。

我已经尝试使用event.preventDefault();和return false来解决此问题，但它仍会跳到顶部。

有人可以帮我吗？

     var scrollPosition = [
        self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
        self.pageYOffset || document.documentElement.scrollTop  || document.body.scrollTop
      ];
      var html = jQuery('html, body'); // it would make more sense to apply this to body, but IE7 won't have that
      html.data('scroll-position', scrollPosition);
      html.data('previous-overflow', html.css('overflow'));
      html.css('overflow', 'hidden');
      window.scrollTo(scrollPosition[0], scrollPosition[1]);
	  
	  



$(function() {
  
  $('a[href*=#]:not([href=#])').on('click', function(event) {
	  
	  event.preventDefault();

	  var html = jQuery('html, body');
      var scrollPosition = html.data('scroll-position');
      html.css('overflow', html.data('previous-overflow'));
      window.scrollTo(scrollPosition[0], scrollPosition[1])
	  
      
      var href = $(this).attr('href');
	 
	 
	 
	 setTimeout(function() {
		 
	  $('html, body').stop().animate({
          scrollTop: $(href).offset().top
      }, 1500, 'easeInExpo');
	  
	  
	  }, 900);
	  
	  
	  
	  setTimeout(function() {
		 
	$('body').css('overflow', 'hidden');
	$('html').css('overflow', 'hidden');
	  
	  
	  }, 4000);
	
	 
   });
  
});

<div id="page-one"></div>
<div id="pageone">
  <!-- some content -->
</div> 

<div id="page-two"></div>
<div id="pagetwo">
  <!-- some content -->
</div> 

<div id="page-three"></div>
<div id="pagethree">
  <!-- some content -->
</div>

Answer 1

没有小提琴的诡计，但请尝试以下方法。

$(document).on('click', 'a[href*=#]:not([href=#])', function(event) {

   // code here

});

我希望这是有道理的。 .on（）函数的第二个参数是选择器。

jQuery Smooth Scroll - 滚动工作一次

1 个答案: