how to remember scroll position of page

前端 未结 7 1787
南笙
南笙 2020-12-15 00:31

I am submitting some data to my database then reloading the same page as the user was just on, I was wondering if there is a way to remember the scroll position the user was

7条回答
  •  天涯浪人
    2020-12-15 01:18

    To Remember Scroll all pages Use this code

    $(document).ready(function (e) {
        let UrlsObj = localStorage.getItem('rememberScroll');
        let ParseUrlsObj = JSON.parse(UrlsObj);
        let windowUrl = window.location.href;
    
        if (ParseUrlsObj == null) {
            return false;
        }
    
        ParseUrlsObj.forEach(function (el) {
            if (el.url === windowUrl) {
                let getPos = el.scroll;
                $(window).scrollTop(getPos);
            }
        });
    
    });
    
    function RememberScrollPage(scrollPos) {
    
        let UrlsObj = localStorage.getItem('rememberScroll');
        let urlsArr = JSON.parse(UrlsObj);
    
        if (urlsArr == null) {
            urlsArr = [];
        }
    
        if (urlsArr.length == 0) {
            urlsArr = [];
        }
    
        let urlWindow = window.location.href;
        let urlScroll = scrollPos;
        let urlObj = {url: urlWindow, scroll: scrollPos};
        let matchedUrl = false;
        let matchedIndex = 0;
    
        if (urlsArr.length != 0) {
            urlsArr.forEach(function (el, index) {
    
                if (el.url === urlWindow) {
                    matchedUrl = true;
                    matchedIndex = index;
                }
    
            });
    
            if (matchedUrl === true) {
                urlsArr[matchedIndex].scroll = urlScroll;
            } else {
                urlsArr.push(urlObj);
            }
    
    
        } else {
            urlsArr.push(urlObj);
        }
    
        localStorage.setItem('rememberScroll', JSON.stringify(urlsArr));
    
    }
    
    $(window).scroll(function (event) {
        let topScroll = $(window).scrollTop();
        console.log('Scrolling', topScroll);
        RememberScrollPage(topScroll);
    });
    

提交回复
热议问题