使用jQuery向下滚动到一定数量的像素

时间:2013-04-22 21:11:27

标签: javascript jquery html css

您可以使用jQuery向下滚动页面到某个像素吗?

我正在构建一个在滚动时具有固定导航栏的网站,当单击按钮时,它将使用jQuery平滑滚动插件滚动到某个锚点。

问题是导航栏与部分重叠,因此它会关闭一半文本。

随着越来越多的jQuery动画网站,我相信以前一定有人遇到过这个问题,但我似乎无法找到答案。

我已经在Wordpress网站上安装了Smooth scroll插件,并在以下部分中包含此代码:

<div id="web"></div>, <div id="app"></div>, <div id="seo"></div>

总共有三个部分,每个按钮都应滚动到。

网址网址:www.gogoblondie.com

2 个答案:

答案 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);
});