网站点击导航栏标题，对应的元素平滑上移以及点击图片或按钮回到页面顶部的特效
2020-12-13 02:37
YPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
标签：js jquery 网站点击导航栏标题对应的元素平滑上移 点击图片或按钮回到页面顶部的特效 设置锚点跳转
之前看w3cshool上面，看到了a,name配合可以设置锚点，很多看书的网站上都用到，可以根据点击对应的目录章节，自动跳到具体的文字内容。
不过用锚点做的特效感觉很粗糙，不够平滑，总是一下子就跳到下面去了，没有给浏览者一种平滑的感觉。所以自己就计划着能不能做一种类似的比较平滑的效果呢？
当然是可以的。这篇博客中的特效要用到如下的函数和属性，大家没见过或者见过用过已经忘了的，可以到w3cshool上恶补下：
eq(index)：相当于数组吧，可以根据index索引到具体的对象
scrollTo()：可以把内容滚动到指定的坐标
scroll()：触发scroll事件
scrollTop()：设置或返回匹配元素的滚动条的垂直位置
offset():返回或设置元素相对于文档的偏移
下面开始贴出代码了：(一共三种，一种是我的，另外是我两个朋友的)
Document 汤姆克鲁斯汤姆克鲁斯汤姆克鲁斯汤姆克鲁斯汤姆克鲁斯
以上是我优化的我朋友的代码。
我使用offset直接取到指定元素相对于文档的偏移。
而我朋友的思路是取到匹配元素之前的元素的高度作为偏移量，把这个作为相对于文档的偏移量
两种方法都是可以的，看个人爱好了。
上面代码里面也有点击图片回到顶部的特效，不是很复杂，我这里就不详细说了。
下面贴出我朋友的代码：
Document 第1个第2个第3个第4个第5个第6个第7个第8个第9个
最后是另外一个朋友的写法：他用了除jquery.js库之外的另外一个jquery.scrollTo-min.js的库，顿时高大上了，平滑的效果更加好。
由于他也顺带做了导航栏色块的移动的特效，所以可能在浏览器上有类似闪屏的效果，大家自行忽略或者删掉那段代码即可。
注意引用jquery.scrollTo-min.js的库之后，scrollTo()的意义就改变了，准确的说被重载了。第一个参数是上移多少像素，第二个是动画时间。
下面是他的代码：
js滑动导航
如果大家有更加简单的方法，欢迎交流讨论下。网站点击导航栏标题，对应的元素平滑上移以及点击图片或按钮回到页面顶部的特效,搜素材,soscw.com
网站点击导航栏标题，对应的元素平滑上移以及点击图片或按钮回到页面顶部的特效
标签：js jquery 网站点击导航栏标题对应的元素平滑上移 点击图片或按钮回到页面顶部的特效 设置锚点跳转
原文地址：http://blog.csdn.net/u010792238/article/details/25406213
文章标题：网站点击导航栏标题，对应的元素平滑上移以及点击图片或按钮回到页面顶部的特效
文章链接：http://soscw.com/essay/25969.html