function goTop(){
var _btn = document.getElementById("goTop");
if (document.documentElement && document.documentElement.scrollTop) {
var _con = document.documentElement;
}
else if (document.body) {
var _con = document.body;
}
window.onscroll = set;
_btn.style.left = "125px";
_btn.onclick = function() {
_btn.style.display = "none";
window.onscroll = null;
this.timer = setInterval(function() {
_con.scrollTop -= Math.ceil(_con.scrollTop * 0.3);
if (_con.scrollTop == 0) {
clearInterval(_btn.timer, window.onscroll = set);
}
}, 10);
};
function set() {
_btn.style.display = _con.scrollTop ? 'block': "none";
}
};
document.write("<div id=\"goTop\" style=\"font-size:12px; width:20px; height:55px; background:#0950A2; color:#fff; line-height:14px; position:fixed; bottom:30px; display:none; cursor:pointer; text-align:center; padding:5px 0; z-index:1; _position:absolute; _top:expression(eval(document.compatMode && document.compatMode == \'CSS1Compat\') ? documentElement.scrollTop + (documentElement.clientHeight - this.clientHeight) - 30 : document.body.scrollTop + (document.body.clientHeight - this.clientHeight) - 30);\">返回顶部</div>");
window.onscroll = goTop;

回到顶端js实现的更多相关文章

  1. js监听滚动条 回到顶端

    效果:当出现滚动条,且滚动条出现移动时,把回到顶端按钮 显示出来:当滚动条回到顶部时,将回到顶端按钮隐藏. <script type="text/javascript"> ...

  2. csdn回到顶端

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 回到顶端的jquery

    现在的淘宝啊,京东啊,各种网站都有一个功能,有一个按钮,在页面最顶端的时候不会显示,当往下拉到一定的时候会出现.点击他会直接跳到页面的顶端.代码如下: html代码: <div id=" ...

  4. 回到顶部js代码

    function go_to_top(){ //把内容滚动指定的像素数(第一个参数是向右滚动的像素数,第二个参数是向下滚动的像素数) window.scrollBy(0,-10); //延时递归调用, ...

  5. JS实现回到Top(顶部)--JavaScript

    当我们浏览一段很长的网页时,已经看到底部了,想回到顶部看前面的内容,可是需要滚动好几转鼠标滑轮或者拉动滚动条走好长“一段路”.这对于用户来说,体验效果是不够好的.如果我们借助简单的一个按钮,点击一下就 ...

  6. 自写jquery网页回到顶部效果,渐隐图标,引用js文件就可以

    唔.进来开发需求,当网页内容草鸡多的时候,用户就须要有个button高速回到顶部,而不是自己去滚滑轮~ 原本以为比較难的说,由于上头要求所实用js来实现,哪个页面引用,哪个页面显示. 于是乎,本屌丝就 ...

  7. JQuery 回到顶部效果

    图片,CSS/HTML/JS代码都在,可以直接用了. CSS代码 <style type="text/css"> #gs_feedback_gotop { _displ ...

  8. Selenium2+python自动化-使用JS脚本处理网页滚动条

    内容来自:https://www.cnblogs.com/yoyoketang/p/6128655.html JS相关知识:http://www.w3school.com.cn/js/index.as ...

  9. Node.js入门笔记(1):基本概念

    Node.js和JavaScript: 核心都是ECMAScrit,比如数据类型,语法结构,内置对象等等. 但是在js中顶层是window 在node中的不存在这个window(console.log ...

随机推荐

  1. 在JAVA中,关于反射机制的讨论

    一.什么是反射机制         简单的来说,反射机制指的是程序在运行时能够获取自身的信息.在java中,只要给定类的名字,     那么就可以通过反射机制来获得类的所有信息. 二.哪里用到反射机制 ...

  2. java代码封装与编译

    代码封装: 在这个java程序内调用另一个类 在arrayTool中把这两个函数封装起来. 编译顺序:(由下文可知应该是先进行语法检查再进行编译) 先编译ArrayTool再编译ArrayOperat ...

  3. Java—Servlet开发

    Servlet API中有4个java包: javax.servlet:包含定义Servlet与Servlet容器之间契约的类与接口. javax.servlet.http:包含定义HTTPServl ...

  4. 阴影效果css

    http://www.cssreflex.com/css-generators/ http://blog.csdn.net/freshlover/article/details/7610269 css ...

  5. sublime和python--path

    配置Sublime Text 2 的Python运行环境 (2013-09-11 11:36:17) 转载▼ 标签: python 分类: 科技相关     Sublime Text 2作为一款轻量级 ...

  6. Centos5.8 安装 PHP5.5 和 memcached

    安装GIT 需要先安装gcc-c++ (sudo yum install gcc-c++) sudo yum install gettext-devel expat-devel cpio perl o ...

  7. UIScrollView增加刷新

    1. if (!self.scrollView) { CGRect frame = CGRectMake(0.0, 0.0, CGRectGetWidth(self.view.frame), CGRe ...

  8. 转:openwrt中luci学习笔记

    原文地址:openwrt中luci学习笔记 最近在学习OpenWrt,需要在OpenWrt的WEB界面增加内容,本文将讲述修改OpenWrt的过程和其中遇到的问题. 一.WEB界面开发         ...

  9. shiro退出登陆清空缓存实现

    上一篇介绍了使用springmvc集成shiro登陆过程(http://www.cnblogs.com/nosqlcoco/p/5579081.html),通过FormAuthenticationFi ...

  10. Theano2.1.13-基础知识之PyCUDA、CUDAMat、Gnumpy的兼容

    来自:http://deeplearning.net/software/theano/tutorial/gpu_data_convert.html PyCUDA/CUDAMat/Gnumpy comp ...