方法：

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. Android Handler处理机制 ( 三 ) ——Handler,Message,Looper,MessageQueue

    在android中提供了一种异步回调机制Handler,使用它,我们可以在完成一个很长时间的任务后做出相应的通知 handler基本使用: 在主线程中,使用handler很简单,new一个Handle ...

  2. React Native iOS环境搭建

    前段时间React Native for Android发布,感觉React Native会越来越多的公司开始研究.使用.所以周六也抽空搭建了iOS的开发环境,以便以后利用空闲的时间能够学习一下. 废 ...

  3. Android开发EditText属性

    Android开发EditText属性 EditText继承关系:View-->TextView-->EditText EditText的属性很多,这里介绍几个:android:hint= ...

  4. crontab任务取消发送邮件

    1. 方式一,每一个计划任务后加上 >/dev/null 2>&1 */5 * * * * sh /web/adm/Shell/checkin_user_count_everyda ...

  5. 小程序基础09：视图层之WXML

    1.WXML WXML是框架设计的一套标签语言,结合基础组件,事件系统,可以构建出页面的结构. 用以下的例子来看看WXML有什么能力: 1.1数据绑定 <view>{{age}}</ ...

  6. php基础29：打开目录

    <?php //1.打开一个目录 $dir = opendir("E:\AppServ\www\php"); //读取目录,使用一个循环来读出 while (!!$file= ...

  7. MATLAB-2015a安装

    &1 准备工作 软件和破解文件 ​软件以64位为例:链接:http://pan.baidu.com/s/1qYQQPli 密码:nc1y 解压密码:www.0daydown.com 破解文件: ...

  8. 预备作业02：成功经验与C语调查20155230

    成功的经验 在写这一次的博客之前,我看了一部分同学所写的博客.因为我不懂关于自己更优秀的技能这一栏要怎么写,所以想要去找能以借鉴的东西.看完发现,这些同学在介绍自己技能时更多的是写自己在某一领域的成就 ...

  9. iOS程序中调用系统自带应用(短信，邮件，浏览器，地图，appstore，拨打电话,iTunes，iBooks )

    在网上找到了下在记录下来以后方便用 在程序中调用系统自带的应用,比如我进入程序的时候,希望直接调用safar来打开一个网页,下面是一个简单的使用:

  10. 用 CNTK 搞深度学习 （一） 入门

    Computational Network Toolkit (CNTK) 是微软出品的开源深度学习工具包.本文介绍CNTK的基本内容,如何写CNTK的网络定义语言,以及跑通一个简单的例子. 根据微软开 ...