Question

我是一个了解HTML5和CSS3而不是JavaScript的新手。当我在我网站上的不同页面之间点击时，我试图让我的浏览器保持在相同的滚动位置。这些页面是illustration.html，design.html和brochures.html。每次加载新页面时跳回到顶部变得有点令人沮丧。以下是我的HTML5示例。

    <!DOCTYPE html>
        <html lang="en">
            <head> 
                <script src="../js/browser.js" type="text/javascript"></script>
            </head>
            <body>
                <section>   
                     <header><title>design</title></header>
                        <article>
                                 <div id="illustration">
                                    <a href="illustration.html">illustration</a>
                                </div>

                                <div id="design">
                                     <a href="#">design</a>
                                 </div>

                                 <div id="brochures">
                                     <a href="brochure.html">brochures</a>
                                </div>
                         </article>
                </section>
            </body>
        </html>

是否有一段简单的JavaScript可以在点击页面时保持我的滚动位置？

Answer 1

这将是棘手的，要么在cookie /会话中保存每个滚动事件的Scroll位置，要么将滚动位置设置为下一个发生的页面加载的最后已知位置，或者通过Ajax替换页面。无论哪种方式，它都不是那么容易，而且正如您在问题评论中所说的那样，大多数用户都希望下一页能够重新回到顶部。但这听起来更像是你对单页面布局感兴趣。请参阅此处的一些示例：http://onepagelove.com/

Answer 2

不是真的。试试这个，将它放在所有网页的结束</body>标记上方。免责声明：它只是伪代码（没有测试它）。

<script>
document.addEventListener('DOMContentLoaded', function() {
    if(typeof(Storage) !== 'undefined') {
        // See if there is a scroll pos and go there.
        var lastYPos = +localStorage.getItem('scrollYPos');
        if (lastYPos) {
            console.log('Setting scroll pos to:', lastYPos);
            window.scrollTo(0, lastYPos);
        }

        // On navigating away first save the position.
        var anchors = document.querySelectorAll('article a');

        var onNavClick = function() {
            console.log('Saving scroll pos to:', window.scrollY);
            localStorage.setItem('scrollYPos', window.scrollY);
        };

        for (var i = 0; i < anchors.length; i++) {
            anchors[i].addEventListener('click', onNavClick);
        }
    }
});
</script>

理论上这是做什么的：

“当文档准备就绪时，检查浏览器是否支持localStorage。如果确实检查了它是否设置了滚动位置。如果有，则滚动到该位置。”

“如果用户点击链接。请保存位置”

请注意，您甚至不知道下一页是否足够长。另请注意，这是不寻常和不明智的行为。

使用JavaScript维护页面加载之间的滚动位置

2 个答案: