返回顶部 3.1版本之后请到这个地方查看文档
温馨提醒:无需html代码,只需引入JS即可
CSS代码
.toTop{position:fixed;bottom:10px;right:20px; z-index:999;display:none; font-size:16px;cursor: pointer;overflow:hidden;visibility:visible; background-color:#fff;border: 1px solid #d9d9d9;color: #9c9c9c;font-size: 16px;width: 38px;height: 38px;line-height: 38px;text-align: center; text-decoration:none;_position:absolute;_top:expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight)} .toTop:hover{ color:#fff; text-decoration:none; background-color:#999}
JS代码
引入jQuery
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
var $backToTopEle=$('<a href="javascript:void(0)" class="Hui-iconfont toTop" title="返回顶部" alt="返回顶部" style="display:none"></a>').appendTo($("body")).click(function(){
$("html, body").animate({ scrollTop: 0 }, 120);
});
var backToTopFun = function() {
var st = $(document).scrollTop(), winh = $(window).height();
(st > 0)? $backToTopEle.show(): $backToTopEle.hide();
/*IE6下的定位*/
if(!window.XMLHttpRequest){
$backToTopEle.css("top", st + winh - 166);
}
};
注意: 如果页面中引用了h-ui.js,无需重复粘贴上面脚本代码。
请在要使用返回顶部的页面上加入下面代码进行调用:
$(function(){ $(window).on("scroll",backToTopFun); backToTopFun()});