转至：http://jingyan.baidu.com/article/7082dc1ca6b928e40a89bd1a.html

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

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

<aname="top"id="top"></a>

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

页面底部放置：

<ahref="#top"target="_self">返回顶部</a>

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

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

方式1（推荐：简单方便）：

<ahref="javascript:scroll(0,0)">返回顶部</a>

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

方式2（注重效果：缓慢向上）：

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

functionpageScroll() {window.scrollBy(0,-10);scrolldelay=setTimeout('pageScroll()',100);}<ahref="pageScroll();">返回顶部</a>

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

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

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

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

<divid="gotop">返回顶部</div>

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，再通过以下形式：

<scriptsrc="/js/gotop.js"type=text/javascript></script>

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

[html][转]常用返回顶部代码的更多相关文章

  1. qq空间返回顶部代码

    点击这里体验效果 以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  2. jQuery火箭图标返回顶部代码

    在网上找来段使用jQuery火箭图标返回顶部代码,感觉比较酷,比较炫,大概样式如下, 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...

  3. css 简单 返回顶部 代码及注释说明

    1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能 方法一:用命名锚点击返回到顶部预设的id为top的元素 html代码 <a href="#top ...

  4. jQ 移动端返回顶部代码整理

    //返回顶部 $('#btn-scroll').on('touchend',function(){ var T = $(window).scrollTop(); var t = setInterval ...

  5. jQuery返回顶部代码

    页面较长时,使用返回顶部按钮比较方便,在电商中必备操作.下面自己制作一个js文件,totop.js,把它直接引用到需要的网页中即可. $(function () { $("body" ...

  6. JavaScript/Jquery返回顶部代码

    <!DOCTYPE html> <html> <head> <title>返回顶部</title> <meta charset=&qu ...

  7. jquer导航锚点链接动画效果和返回顶部代码

    $(function(){ $(".index_nav li a").click(function(event){ //绑定按钮的单击事件 var index = this.tit ...

  8. JQ返回顶部代码分享~~~~

    1.jq代码: <script type="text/javascript"> $(function() { $("#tbox").click(sc ...

  9. js平滑返回顶部代码

    随便找的一个,使用时直接调用gotoTop就行了,至于调速度之类的我没试,有兴趣的自己试试吧 注意:如果你想改变这个函数的名称千万不要忘了要同时改变第37行的那个gotoTop /** * JavaS ...

随机推荐

  1. SQLite入门与分析(四)---Page Cache之事务处理(1)

    写在前面:从本章开始,将对SQLite的每个模块进行讨论.讨论的顺序按照我阅读SQLite的顺序来进行,由于项目的需要,以及时间关系,不能给出一个完整的计划,但是我会先讨论我认为比较重要的内容.本节讨 ...

  2. mysql 闪回表工具

    use HTTP::Date qw(time2iso str2time time2iso time2isoz); use POSIX; my $SDATE = strftime("%Y-%m ...

  3. 【转】Android Service被关闭后自动重启,解决被异常kill 服务

    http://www.kaifajie.cn/android/10182-2.html 每次调用startService(Intent)的时候,都会调用该Service对象的onStartComman ...

  4. 在运行时切换 WinForm 程序的界面语言 System.ComponentModel.ComponentResourceManager .ApplyResources

    Download the code for this article: WinForm-Multilanguages-2.rar (11 KB). 方法二: 下面介绍一种只需对现有代码做较小改动的方法 ...

  5. poj 3009 Curling 2.0( dfs )

    题目:http://poj.org/problem?id=3009 参考博客:http://www.cnblogs.com/LK1994/ #include <iostream> #inc ...

  6. 分享10个Js的小型库，效果真的很棒

    1.$fx()简介:$fx()是一个轻量级的动画库,一些复杂的动画,可以由多个简单的动画效果进行组合,但是提供的是混淆压缩过的代码,对于研究动画源码的朋友可能特别不爽API:http://fx.ine ...

  7. 如何创建,增加swap

    使用分区做为SWAP比较好,速度比文件的快,也不容易产生磁盘碎片所有应该尽量使用分区作为SWAP. 先说说使用文件做为SWAP吧:一.因为做为SWAP的文件,必须是连续的,所以需要使用dd命令创建:[ ...

  8. Rails常用命令

    rails new Project rails g scaffold location uuid:string deviceid:string latitude:float longitude:flo ...

  9. SpringSide 3 中的多数据源配置的问题

    在SpringSide 3 中,白衣提供的预先配置好的环境非常有利于用户进行快速开发,但是同时也会为扩展带来一些困难.最直接的例子就是关于在项目中使用多个数据源的问题,似乎很难搞.在上一篇中,我探讨了 ...

  10. 从Decorator，Adapter模式看Java的IO库

    我想任何一本介绍模式的书在讲到Decorator模式的时候不能不提到它的实际应用--在Java/IO库里面的应用,<<Java与模式>>这本书也不例外,有点不一样的是,这本书在 ...