Question

我想在页面上存储用户位置。假设用户正在阅读文章。如果用户按下刷新按钮，则应该在相同位置重新加载。

我知道我可以使用document.body.scrollTop来存储用户的位置。我想知道是否有更好的方法？

Answer 1

您应该使用anchors，甚至可以使用指向网站上特定位置的网址。如果重新加载页面，则最终将位于相同位置。因此，请根据您页面上的元素自动更新url。但是您必须删除页面加载时的所有锚标签，否则，滚动会突然跳动并滞后于锚

var url = "";
    var anchor = "";
    var element1 = "";
    var element2 = "";    
    $(document).ready(function () {
        //save url on page load        
        $('a').each(function () {
            //get the anchor name attribute
            var nameAttr = $(this).attr('name');
            if (nameAttr !== undefined) {             
                //remove special characters and replace space with "-" on name attribute
                nameAttr = nameAttr.replace(/\s/g, '-'); 
                nameAttr = nameAttr.replace(/[&\/\\#,+()$~%.'":*?<>{}]/g, '');
                nameAttr = nameAttr.toLocaleLowerCase();
                //changing the name attribute
                $(this).attr('name', nameAttr);
            }            
        });    
        //Storing url
        url = window.location.href;
        url = url.substring(0, url.indexOf('#'));          
    });    
    $(function () {
        $(window).scroll(function () {       
            //retrive right headline
            var findMiddleElement = (function (docElm) {
                var viewportHeight = docElm.clientHeight,                   
                    elements = $('.subheading');
                return function (e) {
                    var middleElement;
                    if (e && e.type === 'resize')
                        viewportHeight = docElm.clientHeight;
                    elements.each(function () {
                        var pos = this.getBoundingClientRect().top;
                        if (pos > viewportHeight / 2.5 && pos < viewportHeight / 1.5) {
                            //find correct element
                            middleElement = this;
                            return false;
                        }
                    });
                    //If statement to remove lag
                    element1 = middleElement;
                    if (element1 !== element2) {
                        element2 = element1;
                        anchor = $(middleElement).text();
                        if (anchor !== "") {           
                            //change url
                            //remove special characters and replace space with "-" in url
                            anchor = anchor.replace(/\s/g, '-');
                            anchor = anchor.replace(/[&\/\\#,+()$~%.'":*?<>{}]/g, '');
                            anchor = anchor.toLocaleLowerCase();
                            //update url
                            window.location.href = url + "#" + anchor;                            
                        }                            
                    }                    
                }
            })(document.documentElement);
            $(window).on('scroll resize', findMiddleElement);  
            //remove the url to prevent lag
            $("a").removeAttr('name');
            console.log(window.location.href);
        });
    });

p{
margin: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class='subheading'><a name='test1'/>test1</p>
<p class='subheading'><a name='test2'/>test2</p>
<p class='subheading'><a name='test3'/>test3</p>
<p class='subheading'><a name='test4'/>test4</p>
<p class='subheading'><a name='test5'/>test5</p>

Answer 2

我认为您可以将该位置存储在本地存储中，在页面加载后，您可以滚动到该位置。

如何在页面刷新时将用户位置存储在相同滚动位置上

2 个答案: