方法：

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);  }  }  }

ＯＫ

这个ＪＳ有滚动效果

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. JavaScript---Angular 和JQuery

    Angular  三层模式 M model和data 数据层 , V view 视图层 , C controller  控制器,程序主逻辑 ,通过指令扩展HTML,通过表达式绑定数据到HTML. Vi ...

  2. 如何等到所有的图片都加载完成之后触发一次onload事件

    var details_img = $(".details img"); //所有的图片 var img_len = details_img.length; details_img ...

  3. RDLC系列之七 条码打印

    参考: C# 条码标签打印程序,RDLC报表动态显示多条码标签的方法 http://www.cnblogs.com/vice/p/4105898.html 我做的思路是:不使用数据库存储image的b ...

  4. 元祖签约K2 BPM，引领绿色健康食品！

    漫步街头,我们经常会被一些鲜艳的红色招牌所吸引,走进去会发现这里有一些普通西饼店不会卖的东西,比如红蛋.年糕.粽子.喜饼.等上海传统食品等......这就是元祖食品. 随着人们生活品质的不断提升,元祖 ...

  5. 万向节死锁 gimbal lock

    ,如下图一,把灰色箭头想象成是一架飞机,红,绿蓝三个圈看作是三个外围控制器,外圈带动所有里圈运动,里圈的运动不影响外圈. 1,首先,绕Y轴旋转(旋转绿圈),来确定前进的方向.这时红圈与蓝圈都跟着旋转. ...

  6. [转]一个四叉树Demo学习

    程序代码: http://www.codeproject.com/Articles/30535/A-Simple-QuadTree-Implementation-in-C 四叉树: using Sys ...

  7. 敏捷软件开发 Agile software Development(转)

    原文链接: http://www.cnblogs.com/kkun/archive/2011/07/06/2099253.html 敏捷软件开发 Agile software Development ...

  8. 分享到微信微博空间等第三方平台的JS代码

    分享功能有利于传播更多优质的内容,所以在web项目中也是比较常用的.今天就抽空整理下常用的分享平台的JS代码.这些代码可以在对应平台的官方网站上生成,官网上对分享内容的参数也有详尽说明.这里只对常用的 ...

  9. jquery-lazyload延迟加载图片 及 加载顺序 bug 修复

    jquery-lazyload延迟加载图片   代码修改片段 function update() { var counter = 0; /**fix by weiyj start***/ elemen ...

  10. 免费Flash图表工具FusionChart

    图表显示是很多开发工作所必不可少的一项功能,今天我介绍一个前段时间发现的免费的Flash图表开发工具,可以通过Adobe Flash实现数据的图表化,动态化以及相互交互. FusionChart是一个 ...