javascript 回到顶部效果的实现
demo.js
window.onload=function() {
var timer=null;
var obtn=document.getElementById('btn');
var isTop=true;
window.onscroll=function() {
if(!isTop) {
clearInterval(timer);
}
isTop=false;
}
obtn.onclick=function () {
timer=setInterval(function(){
var osTop=document.documentElement.scrollTop||document.body.scrollTop;
var ispeed=Math.floor(-osTop/5);
document.documentElement.scrollTop=document.body.scrollTop-=osTop+ispeed;
isTop=true;
if(osTop==0) {
clearInterval(timer);
}
},30);
}
}
demo.css
.box {
width:1190px;
margin: 0 auto;
}
#btn {
width:40px;
height: 40px;
position:fixed;
left:50%;
bottom:30px;
background:url(顶部.png) no-repeat left top ;
margin-left: 610px;
}
#btn:hover {
background:url(顶部.png) no-repeat left -40px ;
}
demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>回到顶部</title>
<link rel="stylesheet" type="text/css" href="demo.css">
<script type="text/javascript" src="demo.js"></script>
</head>
<body>
<div class="box">
<img src="背景.jpg"/>
</div>
<a href="javascript:;" id="btn" title="回到顶部"></a>
</body>
</html>
效果：
javascript 回到顶部效果的实现的更多相关文章
- 用Javascript实现回到顶部效果
用Javascript实现回到顶部效果 经常看到网页中有回到顶部的效果,今天也研究一下回到顶部有哪些方法.众所周知,用锚链接是实现回到最简单的方法,但是从用户体验效果来说,并不是最好的.(锚链接回到顶 ...
- javascript 特效实现(2)——回到顶部效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JS实现回到顶部效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery实现"跳到底部"，"回到顶部"效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 自写jquery网页回到顶部效果，渐隐图标，引用js文件就可以
唔.进来开发需求,当网页内容草鸡多的时候,用户就须要有个button高速回到顶部,而不是自己去滚滑轮~ 原本以为比較难的说,由于上头要求所实用js来实现,哪个页面引用,哪个页面显示. 于是乎,本屌丝就 ...
- 页面滚动事件和利用JS实现回到顶部效果
页面滚动 事件:window.onscroll, 获得页面滚动位置:document.body.scrollTop: HTML代码: 这里注意此处逻辑,大于500就显示,否则就隐藏,还有注意如果变量名 ...
- JavaScript实现网页回到顶部效果
在浏览网页时,当我们浏览到网页底部,想要立刻回到网页顶部时,这时候一般网页会提供一个回到顶部的按钮来提升用户体验,以下代码实现了该功能 HTML代码: <p id="back-top& ...
- javascript 回到顶部 动画效果
上代码: <!DOCTYPE html> <html> <head> <meta content="测试demo" name=" ...
- 纯javascript 回到 顶部 实例
很多网站都会采用瀑布式的加载模式,像qq空间加载好友动态,为了用户体验更好,很多网站会加上回到顶部的连接,但大多数网站都是一下子就回到了顶部,当然,这样有这样的好处,但是我是个比较喜欢很炫的东西的人, ...
随机推荐
- Python 爬虫实战（1）：分析豆瓣中最新电影的影评
目标总览 主要做了三件事: 抓取网页数据 清理数据 用词云进行展示 使用的python版本是3.6 一.抓取网页数据 第一步要对网页进行访问,python中使用的是urllib库.代码如下: from ...
- php array_key_exists()函数 语法
php array_key_exists()函数 语法 作用:检查某个数组中是否存在指定的键名.大理石平板价格 语法:array_key_exists(key,array) 参数: 参数 描述 key ...
- php str_replace()函数 语法
php str_replace()函数 语法 作用:字符串替换操作,区分大小写大理石构件 语法:str_replace(find,replace,string,count) 参数: 参数 描述 fin ...
- locate 安装
locate http.conf locate apache2.conf .运行locate $ locate -bash: locate: command not found 提示找不到命令 .安装 ...
- 一种算法的实现，几个相同大小的div组合在一起，判断是不是矩形
- 学习日记2、easyui treeGrid属性及时间
属性 该属性扩展自数据网格(datagrid),下面是为树形网格(treegrid)添加的属性. 名称 类型 描述 默认值 idField string 定义标识树节点的键名字段.必需. null t ...
- jacoco + ant远程统计（tomcat/spring boot）服务的代码覆盖率
什么是Jacoco? Jacoco(java code coverage)是一个开源的Java代码覆盖率工具,Jacoco可以嵌入到Ant .Maven中,并提供了EclEmma Eclipse插件, ...
- Windowed functions can only appear in the SELECT or ORDER BY clauses
尝试做分页处理 select row_number over (orderby id asc) as rownum,* from table where rownum>=(@page*@page ...
- 1208C Magic Grid
题目大意 给你一个n 让你用0~n^2-1的数填满一个n*n的正方形 满足每个数值出现一次且每行每列的异或值相等 输出任意一种方案 分析 我们发现对于4*4的正方形 0 1 2 3 4 5 ...
- Spring Boot 读取外部的配置文件
Spring Boot 程序会按优先级从下面这些路径来加载application.properties 或者 application.yml 配置文件 jar包同级目录下的/config目录jar包同 ...