如何用jquery写一个简单的返回顶部
2015-07-23 22:11
706 查看
话不多说，直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding: 0;
}
#header {
height: 45px;
background-color: #d0cccc;
}
#top{
position: fixed;
bottom:0;
right:0;
width:45px;
height:45px;
background:#d0cccc;
border-radius:50%;
}
</style>
</head>
<body style="height:900px;">
<div id="header"></div>
<div id="top"></div>
</body>
<script src="jquery-1.11.1.js"></script>
<script>
$(function() {
jQuery(document).ready(function($) {
$body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body'); // 这行是 Opera 的补丁, 少了它 Opera 是直接用跳的而且画面闪烁 by willin
$('#top').click(function() {
$body.animate({
scrollTop: $('#header').offset().top
}, 1000);
return false; // 返回false可以避免在原链接后加上#
});
});
});
$(function(){
$("#top").hide();
$(window).scroll(function(){
var clientH = $(window).height();
var scrollTop = $(window).scrollTop();
if(scrollTop > clientH/4){
$("#top").show();
}else{
$("#top").hide();
}
});
});
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding: 0;
}
#header {
height: 45px;
background-color: #d0cccc;
}
#top{
position: fixed;
bottom:0;
right:0;
width:45px;
height:45px;
background:#d0cccc;
border-radius:50%;
}
</style>
</head>
<body style="height:900px;">
<div id="header"></div>
<div id="top"></div>
</body>
<script src="jquery-1.11.1.js"></script>
<script>
$(function() {
jQuery(document).ready(function($) {
$body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body'); // 这行是 Opera 的补丁, 少了它 Opera 是直接用跳的而且画面闪烁 by willin
$('#top').click(function() {
$body.animate({
scrollTop: $('#header').offset().top
}, 1000);
return false; // 返回false可以避免在原链接后加上#
});
});
});
$(function(){
$("#top").hide();
$(window).scroll(function(){
var clientH = $(window).height();
var scrollTop = $(window).scrollTop();
if(scrollTop > clientH/4){
$("#top").show();
}else{
$("#top").hide();
}
});
});
</script>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Jquery例子: 复制表一的某一列的内容到表二某列的输入框
- jQuery源码框架思路
- jquery 的ajax的同、异步问题
- jquery ajax CORS 跨域访问 WebService
- jQuery 源码分析4: jQuery.extend
- 非常简单的使用jquery fancybox插件实现的查看图片效果
- Jquery Validate插件+requireJs库
- flask接受jquery ajax传递过来的参数
- 关于在jquery动态修改css,html中,mouseenter,mouseleave,click等方法失效的处理
- jquery validationengine验证
- jQuery静态方法parseJSON方法使用和源码分析
- jQuery报错：
- jQuery基本方法随笔
- jquery日期格式化
- Jquery Mobile 中绑定事件
- jQuery判断获得的对象是否存在的方法
- jquery easyui树形菜单调用点击事件例子
- js jquery 杂记
- jquery 插件写法笔记
- jquery实现简单的轮换出现效果实例