返回顶部(html/css/js)

作者在 2016-02-04 15:25:54 发布以下内容

html部分:
/在顶部的地方放一个锚/
a href="#" class="cd-top"
css部分:
.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("此处放向上箭头图片的链接") no-repeat center 50%;
visibility: hidden;
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.cd-top.cd-is-visible {
/
the button becomes visible /
visibility: visible;
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: 60px;
width: 60px;
right: 30px;
bottom: 30px;
}
}
js部分:
jQuery(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
offsetopacity = 1200,
//duration of the top scrolling animation (in ms)
scroll
topduration = 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');
    }
});

//smooth scroll to top
$back_to_top.on('click', function(event){
    event.preventDefault();
    $('body,html').animate({
        scrollTop: 0 ,
        }, scroll_top_duration
    );
});

});

默认分类 | 阅读 12668 次
文章评论,共0条
游客请输入验证码
浏览19928次
文章分类
最新评论