官方微博: 腾讯  
首页 > ECSHOP教程 > ECSHOP模板教程 > ECSHOP商城首页修改 > ecshop首页增加返回顶部按钮js效果

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

ECSHOP教程 / ecshop 教程网(www.ecshop119.com) 2013-05-21

一款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

}

 

3,将附件内的图片文件放到根目录images里,将附件内两个js文件放到根目录js文件夹里就行。

 

转载请注明:ECshop119模板屋-ECshop教程网(全国最专业的ECSHOP插件制作商-专业ECSHOP二次开发)

帮助目录

在线反馈

可以将问题或建议反馈给我们。

提交在线反馈

与网友交流ECSHOP开发修改。

加入QQ群交流