您的位置：首页 > Web前端 > JQuery

Jquery “回到顶部”

2016-05-18 15:26 465 查看

1.html页面：

<head>
<title></title>
<meta charset="utf-8" />
<script src="scripts/jquery-1.9.1.min.js"></script>
<script src="scripts/gotoTop.js"></script>
<style type="text/css">
.demo {
height: 1400px;
padding-top: 100px;
}

.demo p {
text-align: center;
height: 32px;
line-height: 32px;
font-size: 16px;
}

.demo p span {
margin: 20px;
}

.demo p a.cur {
color: #f60;
font-weight: bold;
}

a.backToTop {
width: 60px;
height: 60px;
background: #eaeaea url(top.gif) no-repeat -51px 0;
text-indent: -999em;
}

a.backToTop:hover {
background-position: -113px 0;
}
</style>
<script type="text/javascript">
$(function () {
$(".backToTop").goToTop();
$(window).bind('scroll resize', function () {
$(".backToTop").goToTop({
pageWidth: 960,
duration: 0
});
});
});
</script>
</head>
<body>
<div class="demo">
<div class="ad_demo">

</div>
</div>
</body>2.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=$.support.msie && 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:910,//页面宽度
pageWidthJg:2,//按钮和页面的间隔距离
pageHeightJg:100,//按钮和页面底部的间隔距离
startline:30,//出现回到顶部按钮的滚动条scrollTop距离
duration:500,//回到顶部的速度时间
targetObg:"body"//目标位置
};
})(jQuery);
$(function(){
$('<a href="javascript:;" class="backToTop" title="返回顶部">返回顶部</a>').appendTo("body");
});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航