首先在页面中加上回到顶部的html的代码:
<a href="#0" class="cd-top">Top</a>
然后对这个按钮进行修饰:
1.基本样式:
.cd-top {
display: inline-block;
height: 40px;
width: 40px;
position: fixed;
bottom: 40px;
right: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
/* image replacement properties */
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
background: rgba(232, 98, 86, 0.8) url(cd-top-arrow.svg) no-repeat center 50%;
visibility: hidden;
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
2.当鼠标移上去后的效果:
.no-touch .cd-top:hover {
background-color: #e86256;
opacity: 1;
}
3.当屏幕可见按钮时的样式:
.no-touch .cd-top:hover {
background-color: #e86256;
opacity: 1;
}
4.当屏幕继续往下滑时候的样式:
.cd-top.cd-fade-out {
opacity: .5;
}
好了,准备稳妥,需要添加js事件。
先声明所需变量:
//当到达这个限度地时候,按钮会出现
var offset = 300 ;
//当到达这个限度地时候,图标会变暗
var offset_opacity = 1200;
//定义跳转到顶部的时间,duration持续的时间
var scroll_top_duration = 700;
//grab the "back to top" link,grab抢占,抓住,获取
var $back_to_top = $('.cd-top');
添加屏幕滚动事件:
$(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');
}
});
最后,添加点击按钮回到顶部的事件:
$back_to_top.on('click', function (event) {
event.preventDefault();
$('body,html').animate({
scrollTop: 0,
}, scroll_top_duration
);
});
ok,这样就可以了,在屏幕滚动到一定的像素,回到顶部的按钮会出现,如果继续往下滚动,就会变得暗,当鼠标放到按钮上会变得亮,点击后,会有动画渐变的回到顶部。