点击返回顶部的实现

在jsp页面中的head部分添加:

<style type="text/css">
        a.backToTop{width:60px; height:60px; background:#eaeaea url("${basePath}groupon/images/top.gif") no-repeat -51px 0; text-indent:-999em}
        a.backToTop:hover{background-position:-113px 0}
        </style>
        <script type="text/javascript" src="${basePath}js/jquery_js/jquery_1.9.1.js"></script>
        <script type="text/javascript" src="${basePath}groupon/js/gotoTop.js"></script>

<script type="text/javascript">
        $(function(){
        $(".backToTop").goToTop();
            $(window).bind('scroll resize',function(){
                $(".backToTop").goToTop({
                    pageWidth:1120,
                    duration:0
                });
            });       
        });
        </script>


gotoTop.js内容如下:

// JavaScript Document
(function($){
var goToTopTime;
$.fn.goToTop=function(options){
var opts = $.extend({},$.fn.goToTop.def,options);
var $window=$(window);
$body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body'); // opera fix
//$(this).hide();
var $this=$(this);
clearTimeout(goToTopTime);
goToTopTime=setTimeout(function(){
var controlLeft;
if ($window.width() > opts.pageHeightJg * 2 + opts.pageWidth) {
controlLeft = ($window.width() - opts.pageWidth) / 2 + opts.pageWidth + opts.pageWidthJg;
}else{
controlLeft = $window.width()- opts.pageWidthJg-$this.width();
}
var cssfixedsupport=/msie/.test(navigator.userAgent.toLowerCase()) && parseFloat($.browser.version) < 7;//判断是否ie6
var controlTop=$window.height() - $this.height()-opts.pageHeightJg;
controlTop=cssfixedsupport ? $window.scrollTop() + controlTop : controlTop;
var shouldvisible=( $window.scrollTop() >= opts.startline )? true : false;

if (shouldvisible){
$this.stop().show();
}else{
$this.stop().hide();
}

$this.css({
position: cssfixedsupport ? 'absolute' : 'fixed',
top: controlTop,
left: controlLeft
});
},30);

$(this).click(function(event){
$body.stop().animate( { scrollTop: $(opts.targetObg).offset().top}, opts.duration);
$(this).blur();
event.preventDefault();
event.stopPropagation();
});
};

$.fn.goToTop.def={
pageWidth:1120,//页面宽度
pageWidthJg:2,//按钮和页面的间隔距离
pageHeightJg:60,//按钮和页面底部的间隔距离
startline:30,//出现回到顶部按钮的滚动条scrollTop距离
duration:200,//回到顶部的速度时间
targetObg:"body"//目标位置
};
})(jQuery);
$(function(){
$('<a href="javascript:;" class="backToTop" title="返回顶部">返回顶部</a>').appendTo("body");
});

 

图片见附件。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值