アンカーリンクの後、リンクされたdiv（jquery）のスクロールの高さのみ

アンカーへのスクロール（jqueryを使用）は一般的ですが、スクロールの後もネイティブスクロールバーでページ全体をスクロールできます。アンカーリンクの後、リンクされたdiv（jquery）のスクロールの高さのみ

これはほぼすべての状況で必要とされていますが、ユーザーがリンクをクリックしてリンクにスクロールさせたい - html/bodyサイズを（divに）サイズ変更してから、別のページにあるように私はFireFoxでこれを達成しましたが、他のすべてのブラウザでコードが誤動作します。 Chromeのスクロールのようなbroswersはうまくいきますが、divの高さは問題ありませんが、jqueryがhtml/bodyをリサイズすると、クロムがページの先頭に戻るようにジャンプします。どのように私はこれを回避することができますか？

FF 5.0の機能は基本的に完璧で、ほとんどのブラウザで複製したいと思っています。

html { 
    overflow: auto; 
} 

body { 
    overflow: hidden; 
}

。

例をオフセットここ

function goToByScroll(id){ 
      $('html,body').css('height', '100%'); 
      $('html,body').css('overflow', 'auto'); 
      $('html,body').animate({scrollTop: $("#"+id).offset().top},'slow', function(){ 
       $('html').css('overflow','auto'); 
       $('body').css('overflow','hidden'); 
       $('html,body').css('height', ($("."+id).css('height'))); 

      }); 

    }

<div class="links"> 
       <ul class="navigation"> 
        <li><a href="javascript:void(0)" onClick="goToByScroll('linkOne')">linkOne</a> 
        </li><li> 
        <a href="javascript:void(0)" onClick="goToByScroll('linkTwo')">linkTwo</a> 
        </li><li> 
        <a href="javascript:void(0)" onClick="goToByScroll('linkThree')">linkThree</a> 
        </li><li> 
        <a href="javascript:void(0)" onClick="goToByScroll('linkFour')">linkFour</a></li> 
       </ul> 
      </div>

出典

2011-07-20 Ojame

は、その後、身体のtopを調整overflow:hiddenにoverflow:autoと<body>にコンテンツ<div> Sを設定することにより、これを行うための一つの方法です：http://jsfiddle.net/pxfunc/BKvae/2/

// declare re-usable jQuery objects and a scrollTo value 
var $body = $('body'), 
    $content = $('#content > div'), 
    scrollTo = 0; 

// adjust the content height on window resize 
$(window).resize(function() { 
    resizeContent(); 
}); 

var resizeContent = function() { 
    $content.height($(window).height()); 
}; 

// initial setter for content area height to match window 
resizeContent(); 

// handle link clicks via jQuery 
$('.navigation a').click(function(e) { 
    e.preventDefault() 
    var $that = $(this); 
    var $contentArea = $($that.attr('href')); // get the div 

    if ($contentArea.position().top !== 0) { // check if already on that contentArea 
     scrollTo = ($body.css('top').replace(/\D+/g, '') * 1) + $contentArea.position().top; // calculate where the body offset should end up 
     $body.animate({top: -scrollTo}, 'slow'); 
    } 
});

出典

2011-07-20 17:47:45 MikeM

アンカーリンクの後、リンクされたdiv（jquery）のスクロールの高さのみ

答えて

関連する問題