当前位置:科普知识站>IT科技>

几种常用网页返回顶部代码

IT科技 阅读(2.32W)
网站的网页中都有返回顶部的功能,就是当用户访问网页时,可以迅速的返回顶部。这里分享几种常用网页返回顶部代码。

使用锚标记

需在body下放个隐藏的锚点标记,内容如下:

几种常用网页返回顶部代码

然后,在网页底部放一个访问链接即可:

几种常用网页返回顶部代码 第2张

此方法效果是一次直接跳到顶部,而且URL地址栏会显示个#top。

几种常用网页返回顶部代码 第3张

使用JS scrollTo函数

javascript scroll函数(scrollBy scrollTo)是用来滚动页面到指定位置,格式定义如下:■scrollBy(xnum,ynum)■scrollTo(xpos,ypos

几种常用网页返回顶部代码 第4张

■xnum,ynum分别指水平、垂直滚动多少像素,正值表示向右或向下滚动,负值表示向左或向上滚动
■xpos,ypos分别指水平和垂直坐标。

几种常用网页返回顶部代码 第5张

scrollBy慢速滚动返回顶部

本方式使用上面提到的scrollBy函数,每次只滚动定量像素,整体看起来有点滚动效果,代码如下:

几种常用网页返回顶部代码 第6张

scrollBy函数第二个参数我设了-100,越大(比如-10)滚动越慢,越小滚动越快,启动滚动只需在页面底部加个链接:

几种常用网页返回顶部代码 第7张

JQuery实现返回顶部功能

首先需要在顶部添加如下html元素:<p id="back-to-top"><a href="#top"><span></span>返回顶部</a></p>,其中a标签指向锚点top,可以在顶部防止一个<a name="top"></a>的锚点,这样在浏览器不支持js时也可以实现返回顶部的效果了。要想让返回顶部的图片显示在右侧,还需要一些css样式,如下:

几种常用网页返回顶部代码 第8张