Question

以下Javascript的作用是什么？有人可以解释这个平滑滚动API中的每一行吗？

    $('a').click(function(){        //when you click 'a' run this function
       $('html, body').animate({              // animate what is in the html and body?
         scrollTop: $( $(this).attr('href') ).offset().top //grab coordinates?
      }, 800);                               // scroll speed?
       return false;                        // not sure what this means 
     });

Answer 1

好的，让我们开始，你的调查中前两行是正确的

$('a').click(function(){        //when you click 'a' run this function
   $('html, body').animate({     // animate the actual body and html element?

下一行有点棘手。让我们分解

$(this).attr("href")

点击元素的（a）href属性值（在这种情况下，它可能类似于＃test1或＃test2

$($(this).attr("href")

如果上面有值＆＃39; #test1＆＃39;选择器变为$（＆＃39;＃test1＆＃39;），它使用id=test1

计算所有元素

$().offset().top

您将获得具有元素坐标的偏移方法。其中一个变量是top，即距文档顶部的距离。

所以下一行会找到滚动所需的像素总数

     scrollTop: $( $(this).attr('href') ).offset().top
  }, 800);         // this is the scroll speed
   return false;    // this will stop the anchor element from executing the default functionality, which is actually navigating to the href specified.
 });

我希望这会有所帮助：P

NoobProgramer =“需要解释这个JQUERY smoothscrolling代码”

1 个答案: