问使用jquery从页面的一节滑到另一节

EN

获取具有偏移量和动画scrollTop的部分的位置，直到元素的顶部

$('a').on('click', function(e){
    e.preventDefault();
    var targetID = $(this).attr('href')
    var elementPosition = $(targetID).offset().top
    $('html,body').animate({scrollTop: elementPosition},'slow');
}); 

jsFiddle实例

它可以向上或向下工作，所以您甚至可以使用它添加一个“返回到顶部”链接

<header id="top">...</header>

只需链接到#top

<a href="#top">Back to top</a>

在示例和上面的代码中，请注意链接的href是它滚动到的位置的id。

在jquery代码中，它接受单击的href的a，并选择ID等于它的元素。然后，代码使用该id查找元素的顶部偏移点，并将scrollTop动画到该元素。

​

参考资料

• 动画() -用于CSS属性动画，也可以在其中找到scrollTop解释。
• attr() -用于获取href值
• 抵消() -用于在文档范围内查找元素的顶部位置。
• 关于() -用于在执行滚动之前监听单击-与点击()相同

您可以使用href标记来调用要显示的部件的ids。

$('a').on('click', function(e){
    e.preventDefault();
    var link = $(this).attr('href');
   $(link).slideUp(700);
});

这将使用链接中的“#”作为您的id标记选择器所需的“#”。

如果您只为将要使用的a标记提供一个类，那么最好将其放在jquery调用这些标记中。不然的话。您将停止所有a标记的默认操作。

$('a.myClass').on('click', function(e){

我将.click更改为.on，因为它是一种将事件绑定到您的函数的更干净的方法，并允许您灵活地完成任务。

函数中的$(this)是指您正在单击的特定标记。

最后，当使用选择器查找带和id的元素时，要确保并在id和'.‘之前使用'#’。在一个类的名字之前。

对问题的答复

你可以用“工作”代替。“链接”和“工作”这两个词都只是变量。因此，您可以随意命名它，但是只要您想要使用这个变量包含的信息，只要您使用相同的名称，它就不会改变任何东西。你可以把它叫做x或z，它还能工作。

真正重要的部分是变量等于什么。在我创建的函数中，变量等于您单击的任何链接的href标记中存储的链接。

如果单击导航中的“work”链接，变量' link‘等于'#work’，因为这是导航项中href的值。同样，如果单击下一个导航项，变量'link‘将等于该项中的href。

我使用它的原因是，在长期运行时，可以编写更少的代码，而不必在向导航页添加更多链接和向页面添加更多节时重新编辑jquery函数。