Question

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

它显示了如何使用缓动从单个网页上的另一个部分/ 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

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

它在1000毫秒或1秒的过程中制作动画。

它也是水平滚动，使用scrollLeft函数并阻止默认事件，这意味着它将使用anchor属性作为参考（即内容1,2或3）进行horitonzally滚动，而不是立即移动到内容（event.preventDefault）

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

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

.offset（）。left 返回元素的左侧位置，以像素为单位

$（$ anchor.attr（'href'））是指第1节，第2节或第3节，因为它们是CSS属性中声明的href属性

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

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

1 个答案: