回到顶端js实现
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实现的更多相关文章
- js监听滚动条 回到顶端
效果:当出现滚动条,且滚动条出现移动时,把回到顶端按钮 显示出来:当滚动条回到顶部时,将回到顶端按钮隐藏. <script type="text/javascript"> ...
- csdn回到顶端
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 回到顶端的jquery
现在的淘宝啊,京东啊,各种网站都有一个功能,有一个按钮,在页面最顶端的时候不会显示,当往下拉到一定的时候会出现.点击他会直接跳到页面的顶端.代码如下: html代码: <div id=" ...
- 回到顶部js代码
function go_to_top(){ //把内容滚动指定的像素数(第一个参数是向右滚动的像素数,第二个参数是向下滚动的像素数) window.scrollBy(0,-10); //延时递归调用, ...
- JS实现回到Top(顶部)--JavaScript
当我们浏览一段很长的网页时,已经看到底部了,想回到顶部看前面的内容,可是需要滚动好几转鼠标滑轮或者拉动滚动条走好长“一段路”.这对于用户来说,体验效果是不够好的.如果我们借助简单的一个按钮,点击一下就 ...
- 自写jquery网页回到顶部效果,渐隐图标,引用js文件就可以
唔.进来开发需求,当网页内容草鸡多的时候,用户就须要有个button高速回到顶部,而不是自己去滚滑轮~ 原本以为比較难的说,由于上头要求所实用js来实现,哪个页面引用,哪个页面显示. 于是乎,本屌丝就 ...
- JQuery 回到顶部效果
图片,CSS/HTML/JS代码都在,可以直接用了. CSS代码 <style type="text/css"> #gs_feedback_gotop { _displ ...
- Selenium2+python自动化-使用JS脚本处理网页滚动条
内容来自:https://www.cnblogs.com/yoyoketang/p/6128655.html JS相关知识:http://www.w3school.com.cn/js/index.as ...
- Node.js入门笔记(1):基本概念
Node.js和JavaScript: 核心都是ECMAScrit,比如数据类型,语法结构,内置对象等等. 但是在js中顶层是window 在node中的不存在这个window(console.log ...
随机推荐
- 这段时间对c#和java的感受
这段时间对c#和java的感受 虽然很多书上说语法相似,但实际这是一个接近于门外汉的看法 真正的不同是 c#对更贴近系统API, 而java倡导跨平台 因而c#语法关键字更多,更细, 而ja ...
- eclipse的包的加减号展开方式
这是win7系统下面 导航树的风格 可能你不太习惯 一个最简单的方法: 桌面新建个 eclipse 快捷方式--->右键属性--->兼容性 勾上以兼容模式运行这个程序
- Structs2配置文件相关说明
1,structs.xml文件解析 <package name="front" namespace="/front" extends="stru ...
- Linux虚拟机突然不能上网了
之前是可以的,然后这次打开突然不能上网了. 更改配置后就好了: 配置如下: 我的问题是打开打开之后变成了OFF不是ON了.然后不管怎么改变O都失败了. 改为: 这样虚拟机这边就好了. 我们看下wind ...
- python 测试驱动开发的简单例子
一.需求分析 需求:一个类 MyClass,有两个功能:add, sub 1.先功能设计 # myclass.py class MyClass(object): # 加法 def add(self): ...
- OkHttp使用教程
Android系统提供了两种HTTP通信类,HttpURLConnection和HttpClient.关于HttpURLConnection和HttpClient的选择>>官方博客尽管Go ...
- K-means算法及文本聚类实践
K-Means是常用的聚类算法,与其他聚类算法相比,其时间复杂度低,聚类的效果也还不错,这里简单介绍一下k-means算法,下图是一个手写体数据集聚类的结果. 基本思想 k-means算法需要事先指定 ...
- CUDA1.1-函数类型限定符与变量类型限定符
这部分来自于<CUDA_C_Programming_Guide.pdf>,看完<GPU高性能变成CUDA实战>的第四章,觉得这本书还是很好的,是一种循序渐进式的书,值得看,而不 ...
- Windows下搭建PHP环境:Apache+PHP+MySQL
本文简单记录一下Windows下搭建PHP环境的过程,一些细节可以参照本文参考资料,此文不再赘述 准备工作: Windows下手工搭建PHP环境需要先下载相应的软件,需要注意的是Apache与PHP的 ...
- [leetcode]算法题目 - Sudoku Solver
最近,新加坡总理李显龙也写了一份代码公布出来,大致瞧了一眼,竟然是解数独题的代码!前几天刚刚写过,数独主要算法当然是使用回溯法.回溯法当时初学的时候在思路上比较拧,不容易写对.写了几个回溯法的算法之后 ...