5

jQueryを使用してページを特定のピクセルまでスクロールできますか?

スクロール時に固定ナビゲーション バーがあり、ボタンをクリックすると、jQuery スムーズ スクロール プラグインを使用して特定のアンカー ポイントまでスクロールする Web サイトを構築しています。

問題は、ナビゲーション バーがセクションに重なってテキストの半分が切り取られていることです。

jQueryでアニメーション化されたWebサイトの数が増えているため、誰かが以前にこの問題を抱えていたに違いないと確信していますが、答えが見つからないようです.

問題のWordpress Webサイトにスムーズスクロールプラグインをインストールし、セクション内に次のコードを配置しました。

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

各ボタンをスクロールする必要がある合計 3 つのセクションがあります。

ウェブサイトの URL: www.gogoblondie.com

4

2 に答える 2

2

奇妙なプラグインを使用する必要はありません ;)
これにより、アイデアが得られるはずです。

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);
});
于 2013-04-22T21:24:12.433 に答える
1

scrollToは、オフセットのある要素までスクロールできる便利な jQuery プラグインです。

于 2013-04-22T21:14:29.883 に答える