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. Hibernate关联映射关系

    Hibernate关联映射关系 一.双向一对多关联映射关系:当类与类之间建立了关联,就可以方便的从一个对象导航到另一个或另一组与它关联的对象(一对多双向关联和多对一双向关联是完全一样的) 1.1创建实 ...

  2. MySQL sql语言的笔记

    3 MySQL数据库 3.1 mysql数据存储结构 先数据库,再表,再有数据 4 数据库管理 4.1 查询所有数据库 mysql> show databases; +------------- ...

  3. Oracle 中 decode 函数用法(转)

    含义解释: decode(条件,值1,返回值1,值2,返回值2,...值n,返回值n,缺省值) 该函数的含义如下: IF 条件=值1 THEN RETURN(翻译值1) ELSIF 条件=值2 THE ...

  4. git删除文件需要注意的事项

    当commit提交一个文件a到本地仓库中,然后又git rm a 删除这个文件(),再执行git push后,同样会把a文件push到远程仓库.并且这个时候执行git pull并不会从远程仓库拉取a文 ...

  5. nginx负载均衡集群中的session共享说明

    在网站使用nginx+php做负载均衡情况下,同一个IP访问同一个页面会被分配到不同的服务器上,如果session不同步的话,就会出现很多问题,比如说最常见的登录状态. 下面罗列几种nginx负载均衡 ...

  6. git 本地分支与远程分支

    github上已经有master分支 和dev分支 在本地 git checkout -b dev 新建并切换到本地dev分支 git pull origin dev 本地分支与远程分支相关联 在本地 ...

  7. mongodb分布式查询

    分布式查询:mongodb的分布式模型分为replica set和sharded cluster. sharded集群中将read根据sharding key(分片键)转发到指定的shard节点,re ...

  8. Linux 网络编程详解十二

    UDP的特点 --无连接 --基于消息的数据传输服务 --不可靠 --UDP更加高效 UDP注意点 --UDP报文可能会丢失,重复 --UDP报文可能会乱序 --UDP缺乏流量控制(UDP缓冲区写满之 ...

  9. ASP.NET MVC 教程-MVC简介

    ASP.NET 是一个使用 HTML.CSS.JavaScript 和服务器脚本创建网页和网站的开发框架. ASP.NET 支持三种不同的开发模式:Web Pages(Web 页面).MVC(Mode ...

  10. struts2和spring3.2的整合 详细演示

    1.首先我们新建一个Web工程,如下: 2.导入Spring和Struts2的jar包. 其中,struts2-spring-plugin-2.1.8.jar是struts2.spring整合的关键. ...