Question

使用网址

中的锚点

http://www.site.com/xxx.php#aaaa

将跳转到锚点

的位置

<a name="aaaa"></a>

但是，它就在屏幕上方。

无论如何要抵消这种轻微下降以适应中间？如果它是一个静态页面，我想我可以将锚点插入更高一点。但我有一个动态生成列表。

Answer 1

您可以使用以下调用轻松滚动页面：

window.scrollBy(0, 100)

缺点是如果你在document.ready（）事件中尝试这样做，它将无法工作，因为浏览器只能在加载整个页面后滚动到所需的元素（包括任何javascript）。所以，该怎么办？

以下是一些带注释的代码，可帮助您了解正在发生的事情：

$(function() {
    var hash = window.location.hash.substring(1);
    if(hash.length > 0 && $('#'+ hash).size() > 0){

        // Binds a function to the page scroll to be executed
        // only once at the first scroll.
        $(document).one('scroll', function(){

            // when the browser finishes loading the page, it will
            // scroll right to our element.
            var elemTop = $('#'+ hash).offset().top; // Retrieve element's offset top
            var docTop = $(document).scrollTop(); // Retrieve page's offset

            // if our element is right at the top of the page, we
            // want to scroll down a bit.
            if(elemTop == docTop) {
                //Adjust the amount of scrolling to the middle of the screen
                window.scrollBy(0, window.outerHeight/2);
            }
        });
    }
});

调整锚位置使其看起来靠近屏幕中间

1 个答案: