以下是 jQuery上下滑动页面滚动定位代码js代码 的示例演示效果:
部分效果截图1:
部分效果截图2:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery左侧滑动可定位网页（支持上下滑动）</title>
<link rel="stylesheet" href="css/demo.css" type="text/css" media="all" />
<script src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/pagescroller.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var navLabel = new Array('Introduction', 'How It Works', "What's Included?", 'Documentation', 'Download Plugin');
$('#main').pageScroller({ navigation: navLabel });
$('.next').click(function(e){
e.preventDefault();
pageScroller.next();
});
$('.prev').click(function(e){
e.preventDefault();
pageScroller.prev();
});
});
</script>
</head>
<body>
<div id="div_box" class="light">
<a href="#" class="prev"><img src="./images/icon_arrow-up_light.png" alt="" width="28" height="31" /></a>
<a href="#" class="next"><img src="./images/icon_arrow-down_light.png" alt="" width="28" height="31" /></a> </div>
<div id="wrapper">
<div id="main">
<div class="section"><h1>Section 1</h1></div>
<div class="section"><h1>Section 2</h1></div>
<div class="section"><h1>Section 3</h1></div>
<div class="section"><h1>Section 4</h1></div>
<div class="section"><h1>Section 5</h1></div>
</div><!-- [END] #main -->
</div><!-- [END] #wrapper -->
</body>
</html>
JS代码(pagescroller.min.js):
var pageScroller ={
}
;
(function(c){
c.fn.extend({
pageScroller:function(f){
f = c.extend({
currentSection:0,sectionClass:"section",navigationClass:"scrollNav",animationSpeed:500,scrollOffset:20,navigation:[],animationBefore:function(){
}
,animationComplete:function(){
}
,onChange:function(){
}
}
,f);
pageScroll = function(d,a){
c.fx.interval = 5;
d.append('<ul class="pageScroll"></ul>');
pageScroller.navi = c(".pageScroll",d);
pageScroller.navi.addClass("left");
pageScroller.sections = c("." + a.sectionClass,d);
pageScroller.scrollDocument = c(document);
pageScroller.scrollWindow = c(window);
pageScroller.scrollBody = c("body");
pageScroller.scrollPosition = pageScroller.scrollWindow.scrollTop();
pageScroller.currentSection = pageScroller.scrollWindow.height();
pageScroller.options = a;
d.css({
position:"relative"}
);
pageScroller.sections.each(function(b){
var d = c(this);
d.css({
position:"relative",margin:0}
);
d.addClass(pageScroller.options.sectionClass + "_" + (b + 1));
pageScroller.options.navigation.length ? pageScroller.navi.append('<li class="' + a.navigationClass + " " + a.navigationClass + "_" + (b + 1) + '"><a href="#pageScroll' + b + '">' + pageScroller.options.navigation[b] + "</a></li>"):pageScroller.navi.append('<li class="' + a.navigationClass + " " + a.navigationClass + "_" + (b + 1) + '"><a href="#pageScroll' + b + '">Navigation ' + (b + 1) + "</a></li>")}
);
pageScroller.pageLinks = c("li",pageScroller.navi);
pageScroller.pageLinks.each(function(b){
pageLink = c(this);
pageAnchor = c("a",this);
pageAnchor.click(function(c){
c.preventDefault();
a.animationBefore();
e(d,pageScroller.sections.eq(b),b)}
)}
);
pageScroller.next = function(){
var b = pageScroller.options.currentSection + 1;
if (b != pageScroller.sections.length){
var a = pageScroller.sections.eq(b);
e(d,a,b)}
}
;
pageScroller.prev = function(){
var b = pageScroller.options.currentSection - 1;
0 >= b && (b = 0);
var a = pageScroller.sections.eq(b);
e(d,a,b)}
;
pageScroller.goTo = function(a){
var a = a - 1,c = pageScroller.sections.eq(a);
e(d,c,a)}
;
pageScroller.scrollWindow.scroll(function(){
h()}
);
setTimeout(function(){
0 == pageScroller.scrollPosition && h()}
,200)}
;
var h = function(){
pageScroller.scrollPosition = pageScroller.scrollWindow.scrollTop();
pageScroller.scrollDistance = pageScroller.scrollPosition + pageScroller.currentSection;
for (i = 0;
i < pageScroller.sections.length;
i++){
var d = pageScroller.sections.eq(i).offset().top;
pageScroller.options.scrollOffset && (d -= pageScroller.options.scrollOffset);
var a = 0;
if (i < pageScroller.sections.length - 1) var a = pageScroller.sections.eq(i + 1),a = pageScroller.options.scrollOffset ? a.offset().top - pageScroller.options.scrollOffset:a.offset().top,b = pageScroller.pageLinks.eq(i),c = pageScroller.pageLinks.eq(pageScroller.sections.length - 1);
if (pageScroller.scrollBody.is(":animated")) return !1;
if (pageScroller.scrollDocument.height() == pageScroller.scrollDistance){
if (!c.hasClass("active")) return updateTo = pageScroller.sections.length - 1,g(pageScroll,updateTo),!1}
else if (a){
if (pageScroller.scrollPosition >= d && pageScroller.scrollPosition < a && !b.hasClass("active")) return updateTo = i,g(pageScroll,updateTo),!1}
else if (pageScroller.scrollPosition >= d && i == pageScroller.sections.length - 1 && !pageScroller.pageLinks.eq(pageScroller.sections.length - 1).hasClass("active")) return updateTo = pageScroller.sections.length - 1,g(pageScroll,updateTo),!1}
}
,e = function(d,a,b){
a = a.offset().top;
pageScroller.options.scrollOffset && (a -= pageScroller.options.scrollOffset);
var e = c("html,body"),f = c(window).scrollTop();
a != f && !e.is(":animated") && e.animate({
scrollTop:a}
,pageScroller.options.animationSpeed,function(){
g(d,b);
pageScroller.options.animationComplete()}
)}
,g = function(c,a){
pageScroller.pageLinks.removeClass("active");
pageScroller.pageLinks.eq(a).addClass("active");
pageScroller.options.currentSection = a;
pageScroller.options.onChange()}
;
if (!pageScroller.options) return pageScroll(this,f)}
}
)}
)(jQuery);
CSS代码(demo.css):
html{height:100%;}
body,div,h1,h2,h3,h4,h5,h6,p,ol,ul,table,a,img{margin:0;padding:0;border:0;outline:0;background:transparent;}
body{height:100%;font-family:'Open Sans','Helvetica Neue',Arial sans-serif;font-size:14px;line-height:20px;color:#333;background:#eee;}
ol,ul{display:block;list-style:none;}
a,a:focus,input,textarea{outline:none;}
a,a:link,a:visited{color:blue;font-weight:bold;text-decoration:none;}
a:hover{text-decoration:underline;}
#wrapper{position:relative;width:100%;overflow:hidden;min-height:100%;}
* html #wrapper{height:100%;}
#main{width:960px;position:relative;overflow:visible;margin:0 auto 140px;padding:0;/*padding:0 0 70px;sticky footer */
background:#fff;-webkit-box-shadow:0px 0px 5px 0px rgba(0,0,0,.3);-moz-box-shadow:0px 0px 5px 0px rgba(0,0,0,.3);box-shadow:0px 0px 5px 0px rgba(0,0,0,.3);}
.section{min-height:500px;padding:40px;}
.topNav{position:fixed !important;width:100%;top:0;left:0;height:65px;background:#fff;-webkit-box-shadow:0px 0px 5px 0px rgba(0,0,0,.3);-moz-box-shadow:0px 0px 5px 0px rgba(0,0,0,.3);box-shadow:0px 0px 5px 0px rgba(0,0,0,.3);}
.topNav.dark{background:#000;background:rgba(0,0,0,.92);border-bottom:4px solid #222;}
.topNav ul{position:relative;overflow:hidden;width:960px;margin:0 auto;display:block;}
.topNavLink{float:left;margin:0 5px 0;}
.topNavLink a{display:block;height:18px;margin:15px 0 0;line-height:16px;padding:7px 12px;color:#666;border:1px solid #fff;font-weight:normal;}
.white .topNavLink.active a{background:#ccc;color:#333;-webkit-border-radius:13px;-moz-border-radius:13px;border-radius:13px;background:#ffffff;/* Old browsers */
background:-moz-linear-gradient(top,#fcfcfc 3%,#eeeeee 100%);/* FF3.6+ */
background:-webkit-gradient(linear,left top,left bottom,color-stop(3%,#fcfcfc),color-stop(100%,#eeeeee));/* Chrome,Safari4+ */
background:-webkit-linear-gradient(top,#fcfcfc 3%,#eeeeee 100%);/* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top,#fcfcfc 3%,#eeeeee 100%);/* Opera 11.10+ */
background:-ms-linear-gradient(top,#fcfcfc 3%,#eeeeee 100%);/* IE10+ */
background:linear-gradient(top,#fcfcfc 3%,#eeeeee 100%);/* W3C */
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc',endColorstr='#eeeeee',GradientType=0 );/* IE6-9 */
border-color:#ddd;}
.dark .topNavLink.active a{background:#222;color:#fff;-webkit-border-radius:13px;-moz-border-radius:13px;border-radius:13px;background:#ffffff;/* Old browsers */
background:-moz-linear-gradient(top,#4c4c4c 3%,#333333 100%);/* FF3.6+ */
background:-webkit-gradient(linear,left top,left bottom,color-stop(3%,#4c4c4c),color-stop(100%,#333333));/* Chrome,Safari4+ */
background:-webkit-linear-gradient(top,#4c4c4c 3%,#333333 100%);/* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top,#4c4c4c 3%,#333333 100%);/* Opera 11.10+ */
background:-ms-linear-gradient(top,#4c4c4c 3%,#333333 100%);/* IE10+ */
background:linear-gradient(top,#4c4c4c 3%,#333333 100%);/* W3C */
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c',endColorstr='#333333',GradientType=0 );/* IE6-9 */
border:none;}
.dark .topNavLink a{border:none;}
.white .topNavLink a:hover{color:#444444;text-decoration:none;}
.dark .topNavLink a:hover{color:#ccc;text-decoration:none;}
.topNav .colors{position:relative;overflow:hidden;float:right;width:100px;margin:22px 0 0;}
.topNav .colors span{display:block;position:relative;overflow:hidden;width:14px;height:0;padding:14px 0 0;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;cursor:pointer;float:left;}
.topNav .colors .label{width:40px;font-size:10px;padding:0;height:16px;line-height:16px;color:#999;}
.topNav .colors span.white{background:#fff;border:1px solid #fff;}
.topNav .colors span.dark{background:#111;border:1px solid #000;margin:0 0 0 5px;}
.topNav .colors.white span.white{border:1px solid #999;}
.topNav .colors.dark span.dark{background:#000;border:1px solid #999;}
.pageScroll{position:fixed !important;top:50%;left:50%;margin-top:-250px;width:167px;border:7px solid #fff;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;-webkit-box-shadow:0px 0px 5px 0px rgba(0,0,0,.3);-moz-box-shadow:0px 0px 5px 0px rgba(0,0,0,.3);box-shadow:0px 0px 5px 0px rgba(0,0,0,.3);}
.pageScroll.left{margin-left:-680px;}
.pageScroll.right{margin-left:500px;}
.scrollNav a{display:block;color:#666;font-weight:normal;padding:8px 10px;background:#f9f9f9;/* Old browsers */
background:-moz-linear-gradient(top,#f9f9f9 0%,#f3f3f3 100%);/* FF3.6+ */
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#f9f9f9),color-stop(100%,#f3f3f3));/* Chrome,Safari4+ */
background:-webkit-linear-gradient(top,#f9f9f9 0%,#f3f3f3 100%);/* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top,#f9f9f9 0%,#f3f3f3 100%);/* Opera 11.10+ */
background:-ms-linear-gradient(top,#f9f9f9 0%,#f3f3f3 100%);/* IE10+ */
background:linear-gradient(top,#f9f9f9 0%,#f3f3f3 100%);/* W3C */
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9',endColorstr='#f3f3f3',GradientType=0 );/* IE6-9 */
border-top:1px solid #fcfcfc;}
.scrollNav{border-top:1px solid #ebeded;}
.scrollNav_1,.scrollNav_1 a{border:none;-webkit-border-top-left-radius:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-topleft:10px;-moz-border-radius-topright:10px;border-top-left-radius:10px;border-top-right-radius:10px;}
.scrollNav a:hover{color:#444;text-decoration:none;}
li.scrollNav.active a{background:#fff;color:#333;font-weight:bold;}
#div_box{position:fixed;z-index:999;height:94%;top:3%;right:5%;width:20px;text-align:center;}
#div_box a{display:block;position:absolute;padding:12px 10px 5px;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;-webkit-box-shadow:1px 1px 5px 0px rgba(0,0,0,.3);-moz-box-shadow:1px 1px 5px 0px rgba(0,0,0,.3);box-shadow:1px 1px 5px 0px rgba(0,0,0,.3);}
#div_box.light a{border:7px solid #fff;background:#f8f6f6;/* Old browsers */
background:-moz-linear-gradient(top,#f8f6f6 0%,#e8e7e7 100%);/* FF3.6+ */
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#f8f6f6),color-stop(100%,#e8e7e7));/* Chrome,Safari4+ */
background:-webkit-linear-gradient(top,#f8f6f6 0%,#e8e7e7 100%);/* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top,#f8f6f6 0%,#e8e7e7 100%);/* Opera 11.10+ */
background:-ms-linear-gradient(top,#f8f6f6 0%,#e8e7e7 100%);/* IE10+ */
background:linear-gradient(top,#f8f6f6 0%,#e8e7e7 100%);/* W3C */
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f6f6',endColorstr='#e8e7e7',GradientType=0 );/* IE6-9 */
}
#div_box.dark a{border:7px solid #1c1c1c;-webkit-box-shadow:1px 1px 5px 0px rgba(0,0,0,.3);-moz-box-shadow:1px 1px 5px 0px rgba(0,0,0,.3);box-shadow:1px 1px 5px 0px rgba(0,0,0,.3);background:#f8f6f6;/* Old browsers */
background:-moz-linear-gradient(top,#3f3f3f 0%,#292929 100%);/* FF3.6+ */
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#3f3f3f),color-stop(100%,#292929));/* Chrome,Safari4+ */
background:-webkit-linear-gradient(top,#3f3f3f 0%,#292929 100%);/* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top,#3f3f3f 0%,#292929 100%);/* Opera 11.10+ */
background:-ms-linear-gradient(top,#3f3f3f 0%,#292929 100%);/* IE10+ */
background:linear-gradient(top,#3f3f3f 0%,#292929 100%);/* W3C */
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f3f3f',endColorstr='#292929',GradientType=0 );/* IE6-9 */
}
#div_box a:hover{text-decoration:none;color:#fff;}
#div_box a.next{bottom:0;}
#div_box a.prev{top:0;}
分享到QQ
分享到微博
微信扫一扫
