首页 > 代码库 > 常用小Demo：用js/jQuery实现回到页面顶部功能
常用小Demo：用js/jQuery实现回到页面顶部功能
HTML代码：
<div class="main"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab amet debitis, dolore eveniet illo maiores nam neque nesciunt perspiciatis praesentium quaerat qui, quidem rem sequi similique sunt ullam voluptate voluptates! </div> //负责容纳各种按钮，例如“回到页面顶部”，“扫面二维码”等等 <div class="backContainer"> <a href="http://www.mamicode.com/#" id="backTop"></a> </div>
CSS代码：
*{margin:0; padding:0;}
a{color:#000; text-decoration:none;}
.main{width:100%; height:1500px;}
.backContainer{position:fixed; right:40px; bottom:40px;}
#backTop{display:block; width:46px; height:46px; background:url(‘images/go-top.png‘) no-repeat 0 -100px;}
#backTop:hover{background-position-y:-150px;}“回到顶部”按钮及鼠标移入时效果截图：
JS代码：
$(‘.backContainer‘).hide();
$(window).scroll(function(){
//当窗口相对于滚动条顶部的偏移大于150px时，显示跳转按钮，否则不显示
if($(window).scrollTop() > 150){
$(‘.backContainer‘).fadeIn(‘slow‘);
}else{
$(‘.backContainer‘).fadeOut(‘slow‘);
}
});
//当点击跳转按钮时
$(‘#backTop‘).click(function(){
$(‘html‘).animate({
scrollTop:0
},1000);
})scroll([[data],fn]):
当用户滚动指定的元素时，会发生 scroll 事件。
scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。
$(window).scroll( function() { /* ...do something... */ } );
animate(params,[speed],[easing],[fn])
用于创建自定义动画的函数。 这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left.
// 在一个动画中同时应用三种类型的效果
$("#go").click(function(){
$("#block").animate({
width: "90%",
height: "100%",
fontSize: "10em",
borderWidth: 10
}, 1000 );
});
scrollTop([val])
获取匹配元素相对滚动条顶部的偏移, 此方法对可见和隐藏元素均有效。
本文出自 “dapengtalk” 博客，请务必保留此出处http://dapengtalk.blog.51cto.com/11549574/1872718
常用小Demo：用js/jQuery实现回到页面顶部功能
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。