Js、Jquery对goTop功能的实现
2024-08-29 20:30:58
本文介绍用原生JS和Jquery分别实现的网页goTopbutton功能,以及在这个过程中碰到的问题。
终于实现的效果类似:http://sc2.163.com/home(注意右下角的top)
代码:
Jquery
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body{height: 2000px;}
#goTop{
display: none;
cursor:pointer;
background: url("common.png") no-repeat scroll 0 -460px;
position: fixed;
width: 60px;
height: 60px;
right: 20px;
bottom: 20px;
text-indent: -9999px;
z-index: 100;
}
#goTop:hover{
background-position: -100px -460px;
}
</style>
<script src="../jQuery/jquery-1.11.3.js"></script>
<script>
$(function(){
$(window).scroll(function(){
var scrH=document.documentElement.scrollTop+document.body.scrollTop;
if(scrH>200){
$('#goTop').fadeIn(400);
}else{
$('#goTop').stop().fadeOut(400);
}
});
$('#goTop').click(function(){
$('html,body').animate({scrollTop:'0px'},200);
});
});
</script>
</head>
<body>
<a id="goTop" href="javascript:">返回顶层</a>
</body>
</html>
JS
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body{height: 2000px;}
#goTop{
display: none;
cursor:pointer;
background:url("common.png") no-repeat scroll 0 -460px;
position: fixed;
width: 60px;
height: 60px;
right: 20px;
bottom: 20px;
z-index: 100;
text-indent: -9999px;
}
#goTop:hover{
background-position: -100px -460px;
}
</style>
</head>
<body>
<a id="goTop" title="返回顶部" href="javascript:scroll(0,0)">返回顶层</a>
</body>
</html>
<script>
(function() {
function $(id){
return document.getElementById(id);
}
window.onscroll=function(){
var scrH=document.documentElement.scrollTop+document.body.scrollTop;
if(scrH>200){
$('goTop').style.display='block';
}else{
$('goTop').style.display='none';
}
};
}());
</script>
代码好像没啥特别好解释了。说说我碰到的问题吧。
①在IE低版本号下。不支持rgba属性~
②原生js的动画效果还不会实现,希望有人留言教下。
最新文章
- javascript类型系统——字符串String类型
- UISrollView
- 解决Linux中遇到No such device
- UglifyJS--javascript代码压缩使用指南{转}
- (博弈论)hdoj 1525 Euclid&#39;s Game
- .woff 文件404,配置到web.config
- INF文件
- Datagridview控件实现分页功能
- BZOJ 1935: [Shoi2007]Tree 园丁的烦恼( 差分 + 离散化 + 树状数组 )
- 用户输入密码隐藏之getpass的使用
- clamav 杀毒软件安装及使用配置
- Android基础知识02—安卓日志工具LogCat的五种方法
- Mac安装opencv指南
- Day 1 For Knowledge Management
- Java 容器源码分析之Map-Set-List
- 2017-2018-2 1723《程序设计与数据结构》第十一周作业 &; 实验三 &; (总体)第三周结对编程 总结
- mac休眠掉电快,更改休眠模式
- MVC 中url-pattern配置为";/";和";/*";的区别
- C++/C, Java学习资料
- sql添加字段说明
热门文章
- Winsock2_WSADATA
- Hadoop推测执行机制问题
- 无法完成安装:&#39;Cannot access storage file &#39;/
- python beautifulsoup获取特定html源码
- Oracle 学习之:ASCII,CHR函数的作用和用法
- [Python3网络爬虫开发实战] 1.5.3-redis-py的安装
- CentOS 6, 编译安装lamp (php-fpm)
- 树莓派 -- i2c学习
- Spring AOP配置简单记录(注解及xml配置方式)
- Django——配置服务器上线