本帖最后由 ecshop模板堂 于 2013-9-17 10:19 编辑
一款jq的返回顶部代码,已测试可以兼容所有浏览器,首屏时候隐藏,当拉到下面去之后会显示出来。教程由ecshop模板堂(www.ecmoban.com)整理,希望大家多多支持
效果:
安装方法: 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;"/>'});
});
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,打开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文件夹里就行。
ecmoban_com.rar (43.92 KB)
解压密码:
本帖隐藏的内容需要回复才可以浏览
|