当前第2页 返回上一页
4、当滚动条滚动到一定位置的时候显示,滚动条向上回滚的时候隐藏向上的回到顶部按钮,这种方式是最常用的方式
1 2 3 | <div class= "goTop" >
<span>Go</span>
</div>
|
jQuery代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | function goTop(min_height) {
$( ".goTop" ).click(
function () {
$( 'html,body' ).animate({
scrollTop: 0
}, 700);
});
min_height=min_height?min_height:400;
$(window).scroll( function () {
var s = $(window).scrollTop();
if (s > min_height) {
$( ".goTop" ).fadeIn(100);
} else {
$( ".goTop" ).fadeOut(200);
}
});
}
$( function () {
goTop();
});
|
css代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | .goTop {
height : 40px ;
width : 40px ;
background : red ;
border-radius: 50px ;
position : fixed ;
top : 90% ;
right : 3% ;
display : none ;
}
.goTop span {
color : #fff ;
position : absolute ;
top : 12px ;
left : 8px ;
}
|
推荐教程:css快速入门
想要下载回到顶部效果代码,可访问:回到顶部代码 栏目!
以上就是css实现快速回到顶部效果的详细内容,更多文章请关注木庄网络博客!
返回前面的内容
相关阅读 >>
css的三种样式形式?
css如何设置粗体
利用css实现鼠标悬停效果
css中id和class选择器怎么使用
css如何实现一个自适应容器
css怎么修改行间距
css min-width属性怎么用
css如何取消样式
如何在css上让图片居中、图片适应
css文字颜色渐变的三种实现方式(附代码)
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css实现快速回到顶部效果