jQuery - 响应式回顶部按钮
js
代码
$(document).ready(function($){
// browser window scroll (in pixels) after which the "back to top" link is shown
var offset = 300,
//browser window scroll (in pixels) after which the "back to top" link opacity is reduced
offset_opacity = 800,
//duration of the top scrolling animation (in ms)
scroll_top_duration = 700,
//grab the "back to top" link
$back_to_top = $('.cd-top');
//hide or show the "back to top" link
$(window).scroll(function(){
( $(this).scrollTop() > offset ) ? $back_to_top.addClass('cd-is-visible') : $back_to_top.removeClass('cd-is-visible cd-fade-out');
if( $(this).scrollTop() > offset_opacity ) {
$back_to_top.addClass('cd-fade-out');
}
});
//www.sucaijiayuan.com
//smooth scroll to top
$back_to_top.on('click', function(event){
event.preventDefault();
$('body,html').animate({
scrollTop: 0 ,
}, scroll_top_duration
);
});
});
html
代码
<a href="#0" class="cd-top">Top</a>
css
代码
.cd-top {
z-index: 9999;
display: inline-block;
border-radius: 3px;
height: 38px;
width: 38px;
position: fixed;
bottom: 40px;
right: 10px;
box-shadow: 0 0 10px rgba(0,0,0,.05);
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
background: #FBE251 url(http://omuy6viz3.bkt.clouddn.com/2017/04/217036514.svg) no-repeat center 50%;
visibility: hidden;
opacity: 0;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s
}
.cd-top.cd-is-visible {
visibility: visible;
opacity: .85
}
.cd-top.cd-is-visible:hover {
visibility: visible;
background: #2EA9DF url(http://omuy6viz3.bkt.clouddn.com/2017/04/217036514.svg) no-repeat center 50%;
opacity: 1
}
.cd-top.cd-fade-out {
opacity: .5
}
.no-touch .cd-top:hover {
background-color: #e86256;
opacity: 1
}
@media only screen and (min-width:768px) {
.cd-top {
right: 20px;
bottom: 20px
}
}
@media only screen and (min-width:1024px) {
.cd-top {
height: 38px;
width: 38px;
right: 30px;
bottom: 30px
}
}
更多效果请查看 这里
参考自 门素材