jQuery滚动不是动画

我想让我的页面滚动到特定的<section>点击一个href。我已经能够使页面跳转到我想要的<section>，但它不光滑（这就像我的.animate不在jQuery中工作）。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 
    }); 
});

提前感谢！

来源

2016-09-21 Nicholas Van Son

你可以用下面的元素id进行动画制作。

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

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

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

 
</body> 
 
</html>

来源

2016-09-21 03:38:16

我用你的jQuery，它将我移动到'

'上，但它仍然不是动画，只是瞬间跳转。此外，我试图用href而不是按钮来做到这一点。 –

所以这个滚动顺利，所以为什么你的一个。你是否正确地给出了'top'的位置。 –

我相信它确实拥有正确的最高价值，因为它跳到了我应该点击链接的位置，但它仍然没有顺利进行 –

$(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的在您的工作空间。
请确保您有房滚动（我假设你做，你只是发布了一个片段）

我希望你能设法得到它的工作！

来源

2016-09-21 04:09:05

jQuery滚动不是动画

回答

相关问题