微客导航 » 文章资讯 » jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]

jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]

2024-02-17 10:41:03 174

jQuery脚本：


$(function(){
varscrollDiv=document.createElement('div');
$(scrollDiv).attr('id','toTop').html('^返回顶部').appendTo('body');
$(window).scroll(function(){
if($(this).scrollTop()!=0){
$('#toTop').fadeIn();
}else{
$('#toTop').fadeOut();
}
});
$('#toTop').click(function(){
$('body,html').animate({scrollTop:0},800);
})
});

CSS样式：


#toTop
{
width:100px;
z-index:10;
border:1pxsolid#333;
background:#121212;
text-align:center;
padding:5px;
position:fixed;
bottom:0px;
right:0px;
cursor:pointer;
display:none;
color:#fff;
text-transform:lowercase;
font-size:0.9em;
}

带有iframe框架的滚动操作：

以上所述是小编给大家介绍的jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

返回顶部
3162201930
czq8825@qq.com

jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]

热门推荐

随机推荐