锚链接后，仅滚动链接div的高度（jquery）答案

【问题标题】：After anchor link, only scroll height of linked div (jquery)锚链接后，仅滚动链接div的高度（jquery）
【发布时间】：2012-06-11 02:23:40
【问题描述】：

滚动到锚点（使用 jquery）很常见 - 但是在滚动之后，用户仍然可以使用本机滚动条滚动整个页面。

这几乎在所有情况下都需要，但是我希望用户单击链接，滚动到链接 - html/body 调整大小（到 div）大小，然后用户可以滚动该区域，就像它们在单独的页面上一样。我已经在 FireFox 中完成了这项工作，但是在其他所有浏览器中，代码都会出现故障。似乎我有一些问题/缺失，因为像 Chrome 滚动这样的浏览器很好，获取 div 高度很好，但是当 jquery 调整 html/body 的大小时，chrome 会直接跳回页面顶部。我该如何解决这个问题？

基本上它在 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>

【问题讨论】：

标签： jquery animation scroll anchor

【解决方案1】：

这是一种方法，将内容 <div>s 设置为 overflow:auto 并将 <body> 设置为 overflow:hidden，然后调整正文的 top 偏移量

示例：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');
    }
});

【讨论】：