您现在的位置是：首页 > 教程 > ecshop商城教程ecshop商城教程

ecshop首页增加返回顶部按钮js效果

又菱2023-12-23 21:08:16ecshop商城教程已有4人查阅

导读一款jq的返回顶部代码，已测试可以兼容所有浏览器，首时候隐藏，当拉到下面去之后会显示出来。安装方法：1，page_footer.lbi里面加上代码

一款jq的返回顶部代码，已测试可以兼容所有浏览器，首时候隐藏，当拉到下面去之后会显示出来。安装方法：
1，page_footer.lbi里面加上代码

<script type="text/javascript">
<!--
$().ready(function() {
$.dialog({id:'scrolltotop',skin:"noborder",position:'rb',move:false,effects:'',
fixed:1,height:160,width:50,border:0,minScrollTop:100,overlay:0,content:'
<img title="回顶部" src="images/emoban_com.jpg" style="width:30px; height:33px;border:none;cursor:pointer;" onclick="scrollToTop()"/>'});
});
function scrollToTop(){
var body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body');
body.animate({scrollTop:0},500);
}
</script>

以及js调用代码

<script src="js/jquery-1.3.2.js"></script>
<script src="js/jquery.dialog.js?6.2.0"></script>

2，打开ECSHOP模板文件夹style.css加入样式代码

#goTopBtn {
POSITION: fixed; TEXT-ALIGN: center; LINE-HEIGHT: 30px; WIDTH: 30px; BOTTOM: 35px; HEIGHT: 33px; FONT-SIZE: 12px; CURSOR: pointer; RIGHT: 0px; _position: absolute; _right: auto
}