Question

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

这几乎是所有情况下都需要的，但是我希望用户点击链接，滚动到链接 - html / body调整大小（到div）大小，然后用户可以滚动该区域，就像他们在一个单独的页面上一样。我在FireFox中完成了这个，但是在其他所有浏览器中代码都出现故障。看起来我有一些乱序/丢失的东西，因为像Chrome滚动这样的broswers很好，得到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>

Answer 1

通过将内容<div>设置为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');
    }
});

锚链接后，只链接div的滚动高度（jquery）

1 个答案: