需要帮助才能理解下面的jquery代码

时间:2015-08-17 06:52:32

标签: jquery

<a href="#home">Home</a>
<a href="#blog">Blog</a>

<div id="home"> Volutpat wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto</div>
<div id="blog"> Volutpat wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto</div>

$('a[href*=#]').click(function(event){
            $('html, body').animate({
                scrollTop: $( $.attr(this, 'href') ).offset().top
            }, 1000);
            event.preventDefault();
        });

此代码用于平滑滚动点击主页,博客链接。但我无法理解jquery部分。这是什么意思 - &gt;

$('a[href*=#]')

和this-&gt;

scrollTop: $( $.attr(this, 'href') ).offset().top

请帮帮我。我是jquery的新手..

1 个答案:

答案 0 :(得分:1)

$('a[href*=#]')选择包含a属性(href匹配属性)的所有[]个元素,其中包含(*=是包含匹配器)a {{ 1}}。

这意味着滚动同一页面上的所有链接(因为它们是基于锚点的)是动画的。

#选择偏移量(scrollTop: $($.attr(this, 'href')).offset().top)到所点击链接所指向的目标(.offset())的页面顶部(.top)并滚动到此位置。