使用js实现html锚功能,可以任意定位锚的位置,比锚更加灵活

今天记录一个js功能,发现该功能很实用,拿出来跟大家分享。

这里我使用js的window.scrollTo()函数,该函数的用法给大家重复一下,语法为scrollTo(x,y),这里x表示在窗口文档显示区上角显示的文档的x坐标,y表示在窗口文档显示区上角显示的文档的y坐标。所有一般网页scrollTo(0,n)可以达到纵向的滚动,但我这里用到的是横向滚动,像win8一样的效果,使用为scrollTo(n,0)。

为了达到点击导航栏横向移动到相应的功能模块,我们把每个功能模块的div设置一个Id,通过Id获得该功能模块距离网页左边的位置为多少!我们可以通过元素的offsetLeft属性获得,写成为:document.getElementbyId(id).offsetLeft,那移动到功能模块位置我们简单的调用js语句window.scrollTo(document.getElementbyId(id).offsetLeft)就可以做到!如果这么简单我就不在这里辛苦写博客记录这个东西啦!

我要达到的效果是“慢慢移动”到这个使用js实现的html锚的地方,锚就是上面说的功能模块的div,使用该div的Id来操控这个div。那我们如何慢慢的移动到锚的地方呢?这是一个平行移动的效果,当然看来我实现的过程你也可以写出纵向移动的效果。

既然需要从当前的位置移动到指定的位置,我们得知道当前的位置,通过百度一些资料得知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 divId = $(this).attr('referToDiv');
 4                 var scrollTox = document.getElementById(divId).offsetLeft - document.getElementById("divForumSupport").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         }

标签