0

単一ページのワードプレス Web サイトを開発しています。これは単一ページであるため、メニューのアニメーション化に jQuery scrollTop を使用しました。div id の対応するメニュー リンクをクリックすると、特定の div に移動したい.現在の問題は、固定配置されたメニュー タブがコンテンツを横切っている..div コンテンツの上に表示される (ビューポートの問題)。

コンテンツを完全に表示するために、このメニュー タブと div コンテンツの間にギャップを設けたいと考えています。

スクロール効果に使用される jQuery コードは次のとおりです。

$(document).ready(function() {

    $('a[href=#welcome]').click(function(){

     $('html, body').animate({scrollTop:$('#welcome').position().top}, 'slow');

     return false;

    });



});


$(document).ready(function() {

  $('a[href=#aboutus]').click(function(){
     $('html, body').animate({scrollTop:$('#aboutus').position().top}, 'slow');

     return false;

  });

});

必要なのは、上記のdivの上部位置「.position().top}」に200pxのような値を追加して、divの上部より下の位置にスクロールできるようにすることです...

編集：「ごめんなさい...上記の要件を間違えました..divの一番上の位置にスクロールできるように、divの一番上の位置から値を減算する必要があります..」


どうすればこれを修正できますか? どんな助けでも大歓迎です..

前もって感謝します..

4

2 に答える 2

1

たとえば、メニューの高さを取得できます。

var menuHeight = $('#mainMenu').height();

オンラインでスクロールする場合：

$('html, body').animate({scrollTop:$('#aboutus').position().top}, 'slow');

メニューの高さを引きます:

$('html, body').animate({scrollTop:$('#aboutus').position().top-menuHeight}, 'slow');

テストされていませんが、動作するはずです。基本的には、div 位置までスクロールすると言いますが、メニューの高さになるその位置の前の位置までスクロールします。

于 2013-02-27T23:39:40.207 に答える
1

完全に理解しているかどうかはわかりませんが、位置に 200 (ピクセル単位なので) を追加できます。 

$(document).ready(function() {
  var marginTop = 200;  // add or remove or even grab the position of another element

   $('a[href=#aboutus]').click(function(){
       $('html, body').animate({scrollTop:$('#aboutus').position().top + marginTop}, 'slow');
         return false;
   });
});
于 2013-02-27T23:39:49.713 に答える