背景描述:
在项目中,有一个查看已发布任务的业务功能,内容都是各种精神,指示和通知,免不了的都是几千几千的文字内容,这样就产生了一个用户体验度业务:如果看到主要内容后,不想继续向下看,而是想返回顶端,应该给用户一个返回顶端的提示。这里简单分享一下我做的返回顶端的代码和实现。
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="返回顶部" onclick="window.scrollTo(0,0);return false;" href="#top" class="back-top"> 返回顶部</a> </div>
实现效果:
往下滚动鼠标的时候,自动显示出来:返回顶端的图标,点击之后,返回顶端。
素材图片: