方法:

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. 通过输入卡号前10位数字判断是哪个银行的卡和类型(储蓄卡or信用卡)

    19位银行卡(包括储蓄卡和信用卡)可以通过前10位数字判断是哪个银行的卡和类型(储蓄卡or信用卡) 16位银行卡(包括储蓄卡和信用卡)可以通过前10位数字判断是哪个银行的卡和类型(储蓄卡or信用卡) ...

  2. meate 标签使用介绍

    //禁止浏览器从本地计算机的缓存中访问内容 <meta http-equiv="pragma" content="no-cache"> //清楚缓存 ...

  3. 分享一个刷网页PV的python小脚本

    下面分享一个小脚本,用来刷网页PV. [root@huanqiu ~]# cat www.py #!/usr/bin/python# coding: UTF-8import webbrowser as ...

  4. 08Spring_Spring和junit测试集成

    第一步: 在项目导入 spring-test-3.2.0.RELEASE.jar 第二步: 编写测试类

  5. C语言 常用的时间函数

    //时间函数的使用 #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<stdlib.h> #include& ...

  6. unity触发器和碰撞器

    Unity中检测碰撞的方法有两种,一种是触发器一种是碰撞器,现在我来解释一下两种的区别. 触发器:有三种方法,分别是OnTriggerEnter,OnTriggerStay,OnTriggerExit ...

  7. Microsoft Visual Studio 正忙

    简介:Microsoft Visual Studio 正忙,Microsoft Visual Studio 正在等待内部操作完成.如果经常在正常使用的情况下遇到此延迟, 请向Microsoft报告此情 ...

  8. iOS后台定位实现

    iOS后台定位实现 (2013-01-24 16:43:12)     工作中碰到一个定位的应用场景:app需要在后台运行,实时上传用户地理位置.   苹果对iOS的规范性在提升了app的品质的同时也 ...

  9. Opencv step by step - ROI

    什么是ROI?ROI就是region of interest ,就是你感兴趣的图像部分,在图像处理中,可能同时要处理多个ROI. Opencv有ROI的API,但是只能同时处理一个(书本上说的,未验证 ...

  10. HoloLens开发手记 - Unity之Gaze凝视射线

    凝视是HoloLens首要输入方式,形式功能类似于桌面系统的光标,用于选择操作全息对象.然而在Unity中并没有明确的Gaze API或者组件. 实现Gaze Implementing Gaze 概念 ...