您可以使用jQuery向下滚动页面到某个像素吗?
我正在构建一个在滚动时具有固定导航栏的网站,当单击按钮时,它将使用jQuery平滑滚动插件滚动到某个锚点。
问题是导航栏与部分重叠,因此它会关闭一半文本。
随着越来越多的jQuery动画网站,我相信以前一定有人遇到过这个问题,但我似乎无法找到答案。
我已经在Wordpress网站上安装了Smooth scroll插件,并在以下部分中包含此代码:
<div id="web"></div>, <div id="app"></div>, <div id="seo"></div>
总共有三个部分,每个按钮都应滚动到。
网址网址:www.gogoblondie.com
答案 0 :(得分:1)
scrollTo是一个很好的jQuery插件,可以让你滚动到一个带偏移量的元素。
答案 1 :(得分:1)
无需使用奇怪的插件;)
这应该给你一个想法:
的 LIVE DEMO 强>
<nav>
<ul>
<li><a href="#web">WEB</a></li>
<li><a href="#app">APP</a></li>
<li><a href="#seo">SEO</a></li>
</ul>
</nav>
<div id="web" class="page" style="margin-top:200px;">WEB</div>
<div id="app" class="page">APP</div>
<div id="seo" class="page">SEO</div>
CSS:
nav{
position:fixed;
top:0px;
width:100%;
height:200px;
background:#cf5;
z-index:2;
}
.page{
position:relative;
min-height: 800px;
}
JQ:
var navHeight = $('nav').outerHeight();
$('nav a').click(function( e ){
e.preventDefault();
var myHref = $(this).attr('href');
var newPos = $(myHref).offset().top;
$('html, body').stop().animate({scrollTop: newPos-navHeight}, 1300);
});