背景描述:
在项目中,有一个查看已发布任务的业务功能,内容都是各种精神,指示和通知,免不了的都是几千几千的文字内容,这样就产生了一个用户体验度业务:如果看到主要内容后,不想继续向下看,而是想返回顶端,应该给用户一个返回顶端的提示。这里简单分享一下我做的返回顶端的代码和实现。
JS代码:
<style>
.back-to {
bottom: 35px;
overflow: hidden;
position: fixed;
right: 10px;
width: 50px;
z-index: 999;
}
.back-to .back-top {
background: url("../../Images/返回顶端图片.png") no-repeat scroll 0 0 transparent;
display: block;
float: right;
height: 50px;
margin-left: 10px;
outline: 0 none;
text-indent: -9999em;
width: 50px;
}
.back-to .back-top:hover {
background-position: -50px 0;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
var bt = $('#toolBackTop');
var sw = $(document.body)[0].clientWidth;
var limitsw = (sw - 1060) / 2 - 40;
if (limitsw > 0) {
limitsw = parseInt(limitsw);
bt.css("right", limitsw);
}
$(window).scroll(function () {
var st = $(window).scrollTop();
if (st > 30) {
bt.show();
} else {
bt.hide();
}
});
})
</script>
Html代码:
<div style="display:none;" class="back-to" id="toolBackTop">
<a title="返回顶部" οnclick="window.scrollTo(0,0);return false;" href="#top" class="back-top">
返回顶部</a>
</div>
实现效果:
往下滚动鼠标的时候,自动显示出来:返回顶端的图标,点击之后,返回顶端。
素材图片: