方法:

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. Android 屏幕适配(二)增强版百分比布局库(percent-support-lib)

    转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/46767825: 本文出自:[张鸿洋的博客] 一 概述 上周一我们发布了Andr ...

  2. (转载)java多态(2)-------Java转型(向上或向下转型)

    5.13.1 向上转型 我们在现实中常常这样说:这个人会唱歌.在这里,我们并不关心这个人是黑人还是白人,是成人还是小孩,也就是说我们更倾向于使用抽象概念“人”.再例如,麻雀是鸟类的一种(鸟类的子类), ...

  3. 查询Sqlserver数据库死锁的一个存储过程(转)

    链接 :http://www.cnblogs.com/mzhanker/archive/2011/06/04/2072739.html 使用sqlserver作为数据库的应用系统,都避免不了有时候会产 ...

  4. C#中的Decimal类型

    这种类型又称财务类型,起源于有效数字问题.FLOAT 单精度,有效数字7位.有效数字是整数部分和小数部分加起来一共多少位.当使用科学计数法的,FLOAT型会出现很严重的错误.比如 8773234578 ...

  5. HTTP协议简介2

    几个相关的知识点: 客户端发送请求时,请求类型为GET与POST的主要差别是什么? 1.请求类型不同,一个为GET,一个为POST 2.当请求类型为GET时,请求的数据以参数的形式添加到url的后面, ...

  6. MPMoviePlayerViewController的使用 (不直接将播放器放到主视图控制器,而是放到一个内部模态视图控制器中)

    其实MPMoviePlayerController如果不作为嵌入视频来播放(例如在新闻中嵌入一个视频),通常在播放时都是占满一个屏幕的,特别是在 iPhone.iTouch上.因此从iOS3.2以后苹 ...

  7. RxJava简介

    RxJava简介 本文为前段时间学习RxJava时留下的历史遗留笔记,仅作纪念,科学的大神教学帖子在这里-> 给 Android 开发者的 RxJava 详解 通过链式调用序列实现基于事件流的异 ...

  8. SQL脚本循环修改数据库字段类型

    数据库在设计的时候也许考虑不全面,导致某些字段类型不太准确.比如设计的时候是varchar(1024),但是实际使用的时候却发现太小了,装不下,于是需要修改字段类型为ntext什么的. 我最近就遇到了 ...

  9. [C/C++基础] C语言常用函数strlen的使用方法

    函数声明:extern unsigned int strlen(char *s); 所属函数库:<string.h> 功能:返回s所指的字符串的长度,其中字符串必须以’\0’结尾 参数:s ...

  10. -webkit-overflow-scrolling:touch iosBug

    IOS8+  -webkit-overflow-scrolling:touch 会导致webview崩溃 解决方案 用js动态添加样式  比如: $("body").css(&qu ...