页面回到顶部的三种实现(锚标记，js)
一、使用锚标记返回页面顶部
使用HTML锚标记最简单，就是看起来有点不好看，点击后会在地址栏显示这个锚标记，其它的倒没什么。
页面顶部放置：
<a name="top" id="top"></a>
放置位置在<body>标签之后随便找个地方放都可以，只要靠近顶部即可。
页面底部放置：
<a href="#top" target="_self">返回顶部</a>
二、使用Javascript Scroll函数返回顶部
scrooll函数用来控制滚动条的位置，有两种很简单的实现方式：
方式1：
<a href="javascript:scroll(0,0)">返回顶部</a>
scroll第一个参数是水平位置，第二个参数是垂直位置，比如要想定位在垂直50像素处，改成scroll(0,50)就可以了。
方式2：
本方式是渐进式返回顶部，要好看一些，代码如下：
复制代码 代码如下:
function pageScroll() {
window.scrollBy(0,-10);
scrolldelay = setTimeout('pageScroll()',100);
}
<a href="pageScroll();">返回顶部</a>
这样就会动态返回顶部，不过虽然返回到顶部但是代码仍在运行，还需要在pageScroll函数加一句给停止掉。
复制代码 代码如下:
if(document.documentElement.scrollTop==0) clearTimeout(scrolldelay);
三、使用Onload加上scroll功能实现动态返回顶部
1、首先在网页BODY标签结束之前加上：
<div id="gotop">返回顶部</div>
2、再调用以下JS脚本部分（本脚本非天缘原创，早前来源于Z-BLOG官方论坛上收集，源包未带作者链接，如果原作者看到敬请留言添加）：
复制代码 代码如下:
BackTop=function(btnId){
var btn=document.getElementById(btnId);
var d=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);
};
function set(){btn.style.display=d.scrollTop?'block':"none"}
};
BackTop('gotop');
对Z-BLOG而言，可以放到$(document).ready(function(){....函数中，也可以独立存成一个js文件，比如gotop.js，再通过：
<SCRIPT src="/js/gotop.js" type=text/javascript></SCRIPT>
来调用，当然了位置最好放在"返回顶部"标签的下面，该调用方法已假设路径为JS，其它位置请自行修改。
补充：
上述返回顶部代码都是文字式样的，也可以把文字更换为漂亮一点的图标，另外还有悬浮状的返回顶部代码（就是页面滚动时，返回顶部图标也会跟着跑的那种），需要使用到层等，搞的有点复杂了，本文暂不列出。
页面回到顶部的三种实现(锚标记，js)的更多相关文章
- Android设置ScrollView回到顶部的三种方式 (转)
一.ScrollView.scrollTo(0,0) 直接置顶,瞬间回到顶部,没有滚动过程,其中Y值可以设置为大于0的值,使Scrollview停在指定位置; 二.ScrollView.fullSc ...
- js——页面回到顶部
很久都没有去慕课网学习学习了,刚恰好就看见了一个用的比较多的小例子——页面回到顶部,记得之前自己也是在初学web时,被这个坑了一回,因此今天特地拿来分享分享…… <!DOCTYPE html&g ...
- 三种动态加载js的jquery实例代码另附去除js方法
!-- 这里为你提供了三种动态加载js的jquery实例代码哦,由于jquery是为用户提供方便的,所以利用jquery动态加载文件只要一句话$.getscript("test.js&quo ...
- 【JQ+锚标记实现点击页面回到顶部】
前言:今天想写个页面常用到的[点击回到页面顶部或是首页的功能],生活和职场一样,总会有低谷的时候,这个时候咱也别怂.别怂.别怂,说三遍!那都不是事,工作没了,再找呗,就像我上周五,团队解散那天,我是笑 ...
- 3.struts2接收页面传参的三种方式
Struts2通过拦截器机制封装了三种接收页面参数的方式: 1.属性驱动 2.模型驱动(有两种) Domain ModelDriven 1.属性驱动:这种方式比较简单,只要你直接在页面定义变量并且符合 ...
- 打印web页面指定区域的三种方法
本文和大家分享一下web页面实现指定区域打印功能的三种方法,一起来看下吧. 第一种方法:使用CSS 定义一 个.noprint的class,将不打印的内容放入这个class内. 代码如下: <s ...
- ASP.NET页面跳转的三种方法比较
在ASP.NET下,经常需要在页面之间跳转,下面我们来分别介绍一下关于.NET中Response.Redirect(),Sever.Execute(),Server.Transfer() 三种页面跳转 ...
- js介绍，js三种引入方式，js选择器，js四种调试方式，js操作页面文档DOM（修改文本，修改css样式,修改属性）
js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...
- jQuery实现页面回到顶部功能
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
随机推荐
- JavaMail_测试编写
@Test public void test1() throws Exception{ // import java.util.Properties; // import javax.mail.Add ...
- .NET程序员提高效率的70多个开发工具
工欲善其事,必先利其器,没有好的工具,怎么能高效的开发出高质量的代码呢?本文为各ASP.NET 开发者介绍一些高效实用的工具,涉及SQL 管理,VS插件,内存管理,诊断工具等,涉及开发过程的各个环节, ...
- Git_分支管理策略
通常,合并分支时,如果可能,Git会用Fast forward模式,但这种模式下,删除分支后,会丢掉分支信息. 如果要强制禁用Fast forward模式,Git就会在merge时生成一个新的comm ...
- [Phonegap+Sencha Touch] 移动开发18 Sencha Touch项目通过phonegap打包后的程序名字的问题
之前说过 sencha phonegap init com.pushsoft.myapp MyApp 之后打包的程序安装包apk的名字是"MyApp.apk",显示在手机桌面上的程 ...
- sqlite - Sqlite Wrappers - Delphi
http://www.sqlite.org/cvstrac/wiki?p=SqliteWrappers Aducom's SQLite: Open source (NewBSD) Delphi (4. ...
- js删除字符串的最后一个字符三种方法
字符串 var basic = "abc,def,ghi,"; 第一种 basic = basic.substr(0, basic.length - 1); 第二种 basic = ...
- C#使用反射加载多个程序集
当开发插件的时候需要用到反射,在客户端动态加载遍历程序集,并调用每个程序集的方法. 创建一个控制台应用程序,首先设计一个接口: public interface ISay { void SaySth( ...
- MVC实现文件下载
□ 思路 点击一个链接,把该文件的Id传递给控制器方法,遍历文件夹所有文件,根据ID找到对应文件,并返回FileResult类型. 与文件相关的Model: namespace MvcApplicat ...
- struts2中的namespace意义
<package name="user" namespace="/user" extends="struts-default"> ...
- css3 transform方法常用属性
css3中transform方法是一个功能强大的属性,可以对元素进行移动.缩放.转动.拉长或拉伸等功能. transform中最为常用的4个属性分别是:rotate();.scale();.skew( ...