scrollTop滚动到适当的位置，然后返回顶部

Question

我正在尝试读取URL中的参数，使一堆display: none内容淡入，然后向下滚动到内容中的适当点。

一切正常，直到它向下滚动。它到达正确的位置，然后莫名其妙地再次跳到页面顶部。谁能告诉我怎么了？

URL将类似于http://mydotcom/mystory/?page=mypage

HTML将有很多介绍性的内容，然后是带有.story类的许多文本块：

<div class="screen story" id="block1" style="margin-bottom: 30px;">
    <div class="container-text">
       some stuff here

    </div>
</div>
<div class="screen story" id="mypage" style="margin-bottom: 30px;">
    <div class="container-text">
        some more stuff here
    </div>
</div>

。story类中包含display:none并且为position: relative。

当您进入页面时，我希望代码解析URL，获取参数，显示.story内容，然后向下滚动至相应的文本块：

    //function to parse URL parameters
    var getUrlParameter = function getUrlParameter(sParam) {
            var sPageURL = window.location.search.substring(1),
                sURLVariables = sPageURL.split('&'),
                sParameterName,
                i;

            for (i = 0; i < sURLVariables.length; i++) {
                sParameterName = sURLVariables[i].split('=');

                if (sParameterName[0] === sParam) {
                    return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
                }
            }

        };

        var page = getUrlParameter('page'); //get the parameter
        if ((page !== "") && (page !== undefined) ){ //if the parameter exists and has a value
            $(".story").fadeIn(); //fade in all the story blocks
            $('html,body').delay( 800 ).animate({
                scrollTop: $("#" + page).offset().top //scroll down to the block specified
            }, 1000);

        }

同样，将出现内容，向下滚动，然后跳回到页面顶部。

Answer 1

我怀疑这是由于未取消“链接”。因此，当您单击站点上的链接时，它可能会在使用javascript之后重新启动网站。

因此，当单击链接然后使用诸如e.preventDefault()或事件监听器为return false之类的事件时，将使用事件监听器进行捕获。这样就可以模拟链接而不触发它。

我可能是错的，但是

[其他原因可能是fadeIn()和scrollTop: $("#" + page).offset().top，因此由于元素被隐藏，计算可能是错误的。因此，将在不隐藏元素的情况下计算偏移量。我可以看到delay(800)，但也许fadeIn持续的时间更多...

对不起我的英语不好