方法:

1.首先在body添加一个标签,在一个页面添加,其它页面也会生效。

<body>  <a name="top">

2.然后在页脚添加一个链接

<a href="javascript:void(0)" onclick="goto_top()">返回页顶</a>

3.JS代码,可以单独写成一个文件,插入到html里

 var goto_top_type = -1;  var goto_top_itv = 0;     function goto_top_timer()  {  var y = goto_top_type == 1 ? document.documentElement.scrollTop : document.body.scrollTop;  var moveby = 15;     y -= Math.ceil(y * moveby / 100);  if (y < 0) {  y = 0;  }     if (goto_top_type == 1) {  document.documentElement.scrollTop = y;  }  else {  document.body.scrollTop = y;  }     if (y == 0) {  clearInterval(goto_top_itv);  goto_top_itv = 0;  }  }     function goto_top()  {  if (goto_top_itv == 0) {  if (document.documentElement && document.documentElement.scrollTop) {  goto_top_type = 1;  }  else if (document.body && document.body.scrollTop) {  goto_top_type = 2;  }  else {  goto_top_type = 0;  }     if (goto_top_type > 0) {  goto_top_itv = setInterval('goto_top_timer()', 10);  }  }  }

OK

这个JS有滚动效果

gotoTop返回顶部 JS的更多相关文章

  1. 弹性返回顶部JS代码

    弹性返回顶部JS代码 弹性返回顶部JS代码点击下载

  2. 手机端网页返回顶部js代码

    <!DOCTYPE html>  <html>  <head>  <meta http-equiv="Content-Type" cont ...

  3. 返回顶部js

    backToTop.js: (function () { var $backToTopEle = $('<div class="backToTop"></div& ...

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

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

  5. Web前端 页面功能——点击按钮返回顶部的实现方法

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

  6. 【转】用jquery编写动态的返回顶部特效

    jquery代码: function gotoTop(min_height){ //预定义返回顶部的html代码,它的css样式默认为不显示 var gotoTop_html = '<div i ...

  7. 添加“返回顶部”小图标按钮的JS(JavaScript)代码详解

    如何给自己的网站添加方便快捷的"返回顶部"小图标按钮呢?如下图: JS源代码: /** * JavaScript脚本实现回到页面顶部示例 * @param acceleration ...

  8. js实现返回顶部功能的解决方案

    很多网站上都有返回顶部的效果,主要有如下几种解决方案. 1.纯js,无动画版本 window.scrollTo(x-coord, y-coord); window.scrollTo(0,0); 2.纯 ...

  9. js返回顶部效果

    当用户浏览的网页过于长的时候,用户在浏览到网页底部想要在返回顶部需要滚动好几次滚轮才能返回顶部,不仅麻烦,而且用户体验也会很差.现在的大多是页面都会在页面顶部或者是页面的可见区域的某一位置固定一个按钮 ...

随机推荐

  1. 022医疗项目-模块二:药品目录的导入导出-对XSSF导出excel类进行封装

    资源全部来源于传智播客. 好的架构师写的程序,就算给刚入门的新手看,新手一看就知道怎么去用.所以我们要对XSSF导出excel类进行封装.这是架构师的工作,但我们也要知道. 我们写一个封装类: 这个类 ...

  2. MVC4 开篇

    开篇,肯定不讲技术. 新项目开工了,用到了MVC4,赶快来园子吐槽下. 刚出来一年,学到了一些东西,但是自知比菜鸟还不如,空闲不看书,不练习demo,快吐我吧... 哈哈,吐吧,哥还是一样淡定,淡定, ...

  3. C#根据IP地址和子网掩码计算广播地址

    using System.Net; /// <summary> /// 获得广播地址 /// </summary> /// <param name="ipAdd ...

  4. http 请求头设置缓存

     nginx不缓存设置 2013-08-15 10:47:39 分类: LINUX 在开发调试web的时候,经常会碰到因浏览器缓存(cache)而经常要去清空缓存或者强制刷新来测试的烦恼,提供下apa ...

  5. Jsoup开发简单网站客户端之读取本地html文件

    用jsoup解析网页,相比于那些返回api数据来说 肯定耗流量,加载慢,所以程序assts中预先放了一个最新的html文件,第一次进来不走网络,直接从本地取,以后会加上wifi离线功能. 首先离线网站 ...

  6. [CareerCup] 2.1 Remove Duplicates from Unsorted List 移除无序链表中的重复项

    2.1 Write code to remove duplicates from an unsorted linked list.FOLLOW UPHow would you solve this p ...

  7. JDK报错Unsupported major.minor version 52.0

    一.问题描述: 新建web项目,由于我配置的Tomcat 6依赖jdk 1.8,所以新建的工程在jdk1.8环境下生成.当我把jdk改成1.6版本时,运行main方法或其他,则 报以下错误: java ...

  8. 『片段』C# DateTime 时间相减 和 时区的关系

    本文只是基础代码片段,直接先写 结论: C# DateTime 时间相减 —— 和 时区无关,只和时间值有关. 运行结果: 测试代码: using System; using System.Colle ...

  9. [codevs 1503]愚蠢的宠物(特殊的LCA)

    题目:http://codevs.cn/problem/1503/ 分析:一道裸的LCA,但是由于询问只有一次,所以可以简单打打……可以从a,b向父节点推直到1节点,然后比较两个序列,后面一段肯定相同 ...

  10. 年前辞职-WCF入门学习(3)

    前言 [2了,刚写好的,手贱,点了删除,还真TMD的删除了,只好重写] 今天周六,去同事家聚了一个餐,感觉各种豪华. 废话不多说,前两集大致介绍了一下什么是WCF以及和WCF相关的WebService ...