脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-使用js实现html锚功能，可以任意定位锚的位置，比锚更加灵活，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 今天记录一个js功能，发现该功能很实用，拿出来跟大家分享。
这里我使用js的window.scrollTo()函数，该函数的用法给大家重复一下,语法为scrollTo(x,y)，这里x表示在窗口文档显示区上角显示的文档的x坐标，y表示在窗口文档显示区上角显示的文档的y坐标。所有一般网页scrollTo(0,n)可以达到纵向的滚动，但我这里用到的是横向滚动，像win8一样的效果，使用为scrollTo(n,0)。
为了达到点击导航栏横向移动到相应的功能模块，我们把每个功能模块的p设置一个Id，通过Id获得该功能模块距离网页左边的位置为多少！我们可以通过元素的offsetLeft属性获得，写成为：document.getElementbyId(id).offsetLeft,那移动到功能模块位置我们简单的调用js语句window.scrollTo(document.getElementbyId(id).offsetLeft)就可以做到!如果这么简单我就不在这里辛苦写博客记录这个东西啦！
我要达到的效果是“慢慢移动”到这个使用js实现的htML锚的地方，锚就是上面说的功能模块的p，使用该p的Id来操控这个p。那我们如何慢慢的移动到锚的地方呢？这是一个平行移动的效果，当然看来我实现的过程你也可以写出纵向移动的效果。
既然需要从当前的位置移动到指定的位置，我们得知道当前的位置，通过百度一些资料得知window.pageXOffset可以获取当前横向滚动条距离坐标的位置。为了从当前位置window.pageXOffset平滑移动到目标位置document.getElementbyId(id).offsetLeft，我们等分之间的距离例如10等分Xoffset10=Math.round((window.pageXOffset-ocument.getElementbyId(id).offsetLeft)/10);每个一段时间添加一次，知道相近的时候停止！
最后把代码给大家，希望能帮助到里，并且理解其中的‘精髓’所在，如果有问题敬请留意。
1 $(function () {
2 $('#Nav li').click(function (e) {
3 VAR pId = $(this).attr('referToDiv');
4 var scrollTox = document.getElementById(pId).offsetLeft - document.getElementById("pForumSupport").offsetLeft;
5 var pageXOffset = window.pageXOffset;
6 Scrollx(pageXOffset, scrollTox);
7 });
8 });
9 var isFirstEnter = true;
10 var Xoffset10 , addXoffset;
11 function Scrollx(oldXoffset, newXoffset) {
12 if (isFirstEnter)
13 {
14 Xoffset10 = Math.round((newXoffset - oldXoffset) / 10);
15 addXoffset = oldXoffset;
16 isFirstEnter = false;
17 }
18 addXoffset+=Xoffset10;
19 if ((oldXoffset <= newXoffset) == (addXoffset < newXoffset))
20 {
21 window.scrollTo(addXoffset, 0);
22 window.setTimeout(function () { Scrollx(oldXoffset, newXoffset) }, 1)
23 }
24 else
25 {
26 window.scrollTo(newXoffset, 0);
27 isFirstEnter = true;
28 }
29 }
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-使用js实现html锚功能，可以任意定位锚的位置，比锚更加灵活全部内容，希望文章能够帮你解决javascript代码实例教程-使用js实现html锚功能，可以任意定位锚的位置，比锚更加灵活所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。