javascript - 我完全理解这个 javascript 滚动教程吗？

Question

我在这里遵循教程: http://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizontal-page-scrolling-with-jquery/

它展示了如何使用缓动从单个网页上的一个部分/div 滚动到另一个部分/div。

这是代码:

<script type="text/javascript"       
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="../newUI/jquery.easing.1.3.js"></script>
<script type="text/javascript">
         $(function() {
            $('ul.nav a').bind('click',function(event){
                var $anchor = $(this);
                $('html, body').stop().animate({
                    scrollLeft: $($anchor.attr('href')).offset().left
                }, 1000);
                event.preventDefault();
            });
        });
  </script>

我的问题是，我正确理解这段代码吗？

src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="../newUI/jquery.easing.1.3.js"></script>

这些只是 javascript 库。

 $(function() {
            $('ul.nav a').bind('click',function(event){

这正在创建一个新的 jscript 函数，其中我有一个通过单击进行导航的列表函数(？)。

var $anchor = $(this);

然后我创建一个变量，它只是我单击的列表的一个实例。

    $('html, body').stop().animate({
                    scrollLeft: $($anchor.attr('href')).offset().left
                }, 1000);
                event.preventDefault();

我不确定这部分。我不确定 .stop.animate 到底在做什么。我知道它会向左移动 1000 像素，但我不明白这个过程。

感谢任何能够解决此问题的人。

Answer 1

Stop() 只是意味着，如果它正在执行任何其他动画，它会停止它们，然后执行那个动画。

它的动画持续 1000 毫秒或 1 秒。

它还可以水平滚动，使用scrollLeft函数并阻止默认事件，这意味着它将水平滚动，使用 anchor 属性作为引用(即内容1、2或3)，而不是立即移动到内容(事件.preventDefault)

请注意每个 div 的“.content”类是如何继承 4000px 宽度的。

scrollLeft: $($anchor.attr('href')).offset().left

.offset().left 返回元素的左侧位置，以像素为单位

$($anchor.attr('href')) 指的是section#1、section#2 或section#3，因为这些是CSS 属性中声明的href 属性

所以该行代码的作用是向左滚动 X 个像素，具体取决于您单击的数字