2

我有一个包含一些固定和绝对元素的页面，这些元素会导致哈希路径链接出现问题。当用户在页面中导航时，我能够修复它，function() { window.scrollBy(0, -80) };但是如果我尝试在我的文档上调用它（滚动以获取传入的哈希）它不起作用。

我发现它不起作用的原因是页面在文档准备好之前实际上并没有调整到哈希值。如果我不能在文件准备好时这样做，我什么时候可以这样做？

4

1 回答 1

1

很明显，浏览器仅在整个页面加载后才从哈希滚动到 HTML 元素——包括所有 JS——，我认为最好的选择是将操作绑定到scroll页面的事件。

你可以尝试这样的事情：

<script type="text/javascript">
    $(function() {

        // Retrieves the hash from URL
        var hash = window.location.hash.substring(1);


        // If hash length > 0 (there is actually a hash)
        // And the #hash element exists on page
        if(hash.length > 0 && $('#'+ hash).size() > 0){

            // Binds a function to the page scroll
            $(document).on('scroll', function(){

                // Here's the bright part: when the browser finish loading the page, it will
                // scroll right to the #hash element. So, whenever the page is scrolled, if
                // the #hash element offset top matches the page scroll offset, it means the page
                // was scrolled right to that element.
                var elemTop = $('#'+ hash).offset().top; // Retrieve element's offset top
                var docTop = $(document).scrollTop(); // Retrieve page's offset

                if(elemTop == docTop){
                    alert('Now I do my stuff!! :)');
                    // Do your stuff
                }

                // And now you make sure "your stuff" won't happen again if the user
                // accidentally scrolls precisely to the #hash element's offset by
                // unbinding scroll action of the page.
                $(document).unbind('scroll');
            });
        }

    });
</script>

我希望能帮助你解决你的问题！让我知道是否有任何不清楚的地方。

于 2013-09-13T18:01:01.737 回答