jQuery滚动没有动画答案

【问题标题】：jQuery scroll is not animatingjQuery滚动没有动画
【发布时间】：2016-09-21 03:33:57
【问题描述】：

我试图让我的页面在单击 href 时滚动到特定的 <section>。我已经能够让页面跳转到我想要的<section>，但它并不流畅（就像我的 .animate 在 jQuery 中不起作用）。

HTML

<li><a href="#about" class="about-link">about us</a></li>

<section class="about" id="about">
    <div class="container">
        <h1>about us</h1>
        <p>text</p>
    </div>
</section>

jQuery

$(document).ready(function(){
  // Add smooth scrolling to all links
  $(".about-link").on('click', function(event) {

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){

        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });
});

提前致谢！

【问题讨论】：

标签： jquery html scroll jquery-animate

【解决方案1】：

您可以使用元素 id 制作动画，如下所示。

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
	<button class="click">Click Me</button>
	<div id="mydiv" style="border:2px solid black;width:800px;height:900px; background-color:orange; position:absolute;top:1000px;margin:20px;">
		hello anuradh
	</div>
</div>

<script type="text/javascript">
	$(document).ready(function(){
		$(".click").on('click',function(){
			//window.location = "#mydiv";

			 $('html, body').animate({
        		    scrollTop: $("#mydiv").offset().top
    				}, 2000);
			});
	});
</script>

</body>
</html>

【讨论】：

我使用了你的 jQuery，它会将我移动到带有 id 的<section>，但它仍然不是动画运动，只是一个瞬间跳跃。另外，我正在尝试使用 href 而不是按钮。
所以这个滚动流畅，所以为什么你的。你给 position 和 top 值正确吗？
我相信它确实有正确的最高值，因为当我点击链接时它会跳转到它应该跳转到的位置，但它仍然没有顺利完成

【解决方案2】：

$(document).ready(function() {
  // Add smooth scrolling to all links
  $(".about-link").on('click', function(event) {

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;
      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function() {

        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });
});

您的代码没有问题。这是我构建的一个jsfiddle 演示它。如您所见，它运行良好。

以下是一些需要考虑的事项：

确保您的工作区中确实有 jquery。
确保您有滚动空间（我假设您这样做了，并且您刚刚发布了一个 sn-p）

我希望你设法让它工作！

【讨论】：