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

一、使用HTML的锚标记最简单了

但是唯一的缺点就是样式不怎么样,会显示这个锚标记。

放置位置在标签之后随便找个地方放都可以,只要靠近顶部即可。

页面底部放置:

返回顶部

二、使用Javascript Scroll函数返回顶部

scrooll函数用来控制滚动条的位置,有两种很简单的实现方式:

方式1(推荐:简单方便):

返回顶部

scroll第一个参数是水平位置,第二个参数是垂直位置,比如要想定位在垂直50像素处,改成scroll(0,50)就可以了。

方式2(注重效果:缓慢向上):

本方式是渐进式返回顶部,要好看一些,代码如下:

functionpageScroll() {window.scrollBy(0,-10);scrolldelay=setTimeout('pageScroll()',100);}返回顶部

这样就会动态返回顶部,不过虽然返回到顶部但是代码仍在运行,还需要在pageScroll函数加一句给停止掉。

if(document.documentElement.scrollTop==0)clearTimeout(scrolldelay);

三、使用Onload加上scroll功能实现动态返回顶部

首先在网页body标签结束之前加上:

返回顶部

2、再调用以下JS脚本部分:

BackTop=function(btnId){varbtn=document.getElementById(btnId);vard=document.documentElement;window.onscroll=set;btn.onclick=function(){btn.style.display="none";window.onscroll=null;this.timer=setInterval(function(){d.scrollTop-=Math.ceil(d.scrollTop*0.1);if(d.scrollTop==0)clearInterval(btn.timer,window.onscroll=set);},10);};functionset(){btn.style.display=d.scrollTop?'block':"none"}};BackTop('gotop');

这些可以放到网页中中,也可以独立存成一个js文件,比如gotop.js,再通过以下形式:

来调用,当然了位置最好放在“返回顶部”标签的下面,该调用方法已假设文件路径为JS,放在其它位置请根据实际修改。

(0)

相关推荐

  • Html网页返回顶部功能的几种实现方法

    不少网站的网页中都有返回顶部的功能,就是当用户访问网页时,可以迅速的返回顶部.也许会有人觉得这个功能很简单,没有什么说的,但据我目前所知,就有五种方法实现这个功能.而且不同的方法能实现的效果也是有所不 ...

  • HTML网页返回顶部怎么做

    我们浏览网页的时候,可以看到页面的底部会有一个"返回顶部"的图标按钮,点击它就回返回顶部,那么怎样实现返回顶部的效果呢? 操作方法 01 如图,先进行网页布局,一个content的 ...

  • js返回顶部特效代码怎么写

    用js实现返回顶部的特效代码,一看看吧. 操作方法 01 获得可视区宽度.document.documentElement.clientWidth(兼容其他浏览器),或者是document.body. ...

  • 常用网页浏览器的浏览器选项设置打开方法图文教程

    还有一些非IE内核的浏览器,如火狐浏览器,谷歌浏览器,Opera浏览器等都是非IE内核比较出名的浏览器。 一些网页设计师经常会把这些软件都安装在自己的电脑上,相对于IE这些浏览器都有一大批自己的用户, ...

  • 几种常用的扫描去网方法

    喜欢图片处理的朋友经常会需要扫描一些报刊杂志上的图片。由于绘画和照片都是由连续的色调来表现图像的明暗层次;而印刷是利用网点的大小来表现画面的色彩浓淡。图片在扫描后,就形成网纹。 (印刷稿扫描后的网纹) ...

  • 九种常用输入法特殊符号功能揭密

    平时经常要输入一些像“★”、“√”之类的特殊符号,或是“壹万贰仟叁佰肆拾伍元”之类的大写金额,很多朋友不知道该如何通过常用输入法快速输入,另外在使用输入法过程中,也时常会出现用五笔输入时有些字不会拆分 ...

  • 常用网页布局原型分享

    xiaopiu上线的新功能支持创建编辑web端项目啦!在大家的监(cui)督(cu)下,程序员拼了老命总算赶在月底前把web项目的需求做完了,差点就要被祭天了QwQ 为了让大家在web上线后能第一时间 ...

  • 淘宝店铺怎么添加返回顶部模块?

    废话不多说,马上开始添加 返回顶部模块!!! 操作方法 01 进入 店铺装修: 02 在页尾区域或网页的最下方 添加模块: 03 添加 自定义内容区模块: 04 编辑添加的自定义内容区模块: 05 插 ...

  • 各类 HTTP 返回状态代码详解

    各类 HTTP 返回状态代码详解如下: 操作方法 01 1xx(临时响应)表示临时响应并需要请求者继续执行操作的状态代码. 100(继续)请求者应当继续提出请求. 服务器返回此代码表示已收到请求的第一 ...