您的位置：首页 > 运维架构

最好的回到顶部插件gotoTop.js实例demo

2016-01-04 00:15 543 查看


直接上代码：http://download.csdn.net/detail/cometwo/9388435

<!DOCTYPE html>
<html>

<head>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="gotoTop.js"></script>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
$(function(){
$(window).scroll(function(){
if($(window).scrollTop()>500){
$('a.backToTop').show();
}
})
$('h1:odd').css('color','blue');
$(".backToTop").goToTop();

})
</script>
<style type="text/css">

html,body{
margin: 0px;
padding: 0px;
left: 0px;
top: 0px;
}

body {

height: 2000px;
}

div {
width: 800px;
height: 50px;
border: 1px solid red;
margin: 40px auto;
}

h1 {
margin: 0px;
padding: 0px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
line-height: 50px;
color: red;
position: relative;
overflow: hidden;
white-space: nowrap;
text-align: center;
}

h1:before,
h1:after {
content: " ";
position: relative;
display: inline-block;
width: 35%;
/* 调节左右中划线的长度*/
height: 1px;
vertical-align: middle;
/*对象内容的垂直对其方式*/
background: blue;
}

h1:before {
left: -5px;
/*设置线与文字的距离*/
margin: 0 0 0 -50%;
}

h1:after {
left: 5px;
margin: 0 -50% 0 0;
}

a.backToTop {
width: 60px;
height: 60px;
position: fixed;
bottom: 50px;   /*页边距*/
right: 50px; /*页边距*/
background: url(top.gif) no-repeat -51px 0;
display: none;
border: 1px solid red;
}
a.backToTop:hover {
background-position: -113px 0
}
</style>

</head>

<body>
<div>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
<h1>我是你大爷</h1>
</div>

</body>

</html>


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=$.browser.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:960,//页面宽度
pageWidthJg:2 ,//按钮和页面的间隔距离
pageHeightJg:100,//按钮和页面底部的间隔距离
startline:300,//出现回到顶部按钮的滚动条scrollTop距离
duration:500,//回到顶部的速度时间
targetObg:"html"//目标位置,用body太恶心了，回不到最上面去
};
})(jQuery);
$(function(){
$('<a href="javascript:;" class="backToTop" title="返回顶部"></a>').appendTo("body");
});
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航