新手程序员 = "Need explanation on this JQUERY smoothscrolling code"

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")

如果上面的值为'#test1'，则选择器变为 $('#test1')，它将所有元素与 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

新手程序员 = "Need explanation on this JQUERY smoothscrolling code"

NoobProgramer = "Need explanation on this JQUERY smoothscrolling code"

html

javascript

css

jquery

frontend