使用jquery从页面的一个部分滑到另一个部分

我正在尝试使用滑动和向下效果在同一网页的各个部分之间进行转换。基本上，是我安排的

我的HTML、CSS和JQuery代码可以在JSFIDLE上看到： （）

更新：我在网上找到了一个叫做scroll to anchor的东西。你的想法是什么？他们的代码我一部分都不懂。这是他们的JSFIDLE:（）

---

我对函数scrollToAnchor（aid）的内容感到迷茫。

您可以使用href标记调用要显示的部件的ID

$('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){

我更改了。单击到。打开，因为它是将事件绑定到函数的一种更干净的方式，并且允许您在以后的过程中灵活地使用

函数中的$（此）指的是您正在单击的特定a标记

最后，当使用选择器查找具有和id的元素时，您要确保在id名称之前使用“#”，在类名称之前使用“.”

对问题的回答

你可以用“工作”来代替。“链接”和“工作”这两个词都只是变量。因此，您可以随意命名它，但这不会改变任何东西，只要您在希望使用此变量包含的信息的任何地方使用相同的名称。你可以称它为x或z，它仍然可以工作

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

如果单击导航中的“工作”链接，则变量“链接”等于“工作”，因为这是该导航项中href的值。同样，如果单击上面的下一个nav项目，则变量“link”将等于该项目中的href

---

我使用它的原因是，从长远来看，允许您编写更少的代码，并且当您向导航添加更多链接并向页面添加更多节时，不必返回并编辑此jquery函数。

使用偏移量获取节的位置，并将滚动上下移动到元素的顶点

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

它可以向上或向下运行，因此您甚至可以使用它添加“返回顶部”链接

在示例和上面的代码中，请注意链接的

href

是它滚动到的

id

---

在jquery代码中，它获取单击的

a

的

href

，并选择ID等于它的元素。然后，代码找到具有该id的元素的顶部偏移点，并对其设置动画

scrollTop

参考资料

• -用于CSS属性动画，也可在此处找到

  scrollTop

  说明
• -用于获取

  href

  值
• -用于查找文档范围内元素的顶部位置
• -用于在执行滚动之前侦听单击-与相同

---

在快速浏览小提琴之后，我认为值得一提的是，您的

html

和

head

标记之间的所有内容都应该在

head

标记中。您可能希望在更新时使用，它与您要查找的内容非常接近，但根据某人的标记进行了定制。.ps

slideDown

向下滑动选定的元素，而不是向下滑动到元素^；我试过用“链接”来修改它，所以我想我必须把链接改成我用过的名字请看上面你问题的答案哦，谢谢！特别是做“回到顶端”以及！我要学习这个。没问题，只是在我的答案中添加了一个参考资料部分来帮助你学习：）我使用codeacademy来获得jquery的基本概述……你使用了什么来获得更深入的理解或更多的学习练习？我从codeacademy之类的东西开始，请务必查看。有一件事加速了我的学习，那就是在这里尝试回答问题，并呈现出我从未遇到过的情景。有时候你知道，有时候你研究了一下这个话题，有时候你被打败了，但你至少看到了答案并从中吸取了教训，尝试了一些你熟悉的东西，研究了一些你不熟悉的东西。谢谢——我会看看这个网站。Brian，js代码在JSFIDLE之外不起作用。另外，我注意到在Stackoverflow上，有两行代码不在JSFIDLE中，用于javascript位。您是否可以从var targetID开始解释这些行的含义？

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

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

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

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