前端WEB页面中点击按钮后，滚动条保持位置不变

2023年8月21日吴代鹏 AJAX JavaScript 前端

方法一：

要确保在点击“编辑”按钮后滚动条位置不变，可以在编辑按钮被点击后，通过JavaScript来记录当前滚动位置，然后在编辑完成后将滚动位置恢复到之前记录的位置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
// 定义一个全局变量来存储滚动位置
var scrollTopPosition = 0;

// 当编辑按钮被点击时，记录当前滚动位置
document.addEventListener('click', function (event) {
    if (event.target && event.target.name == 'edit_button') {
        scrollTopPosition = window.scrollY;
    }
});

// 当保存编辑或取消编辑时，恢复滚动位置
document.addEventListener('click', function (event) {
    if ((event.target && event.target.name == 'save_button') || (event.target && event.target.name == 'cancel_button')) {
        window.scrollTo(0, scrollTopPosition);
    }
});
</script>

方法二：

1、使用 AJAX 加载编辑界面： 当用户点击“编辑”按钮时，使用 AJAX 请求加载编辑界面，而不是在同一页面内切换视图。这样可以确保页面不会重新加载，滚动位置将保持不变。
2、使用 Cookie 或 Session 存储滚动位置： 当用户点击“编辑”按钮时，将当前滚动位置存储在 Cookie 或 Session 中。然后，在编辑完成后，从 Cookie 或 Session 中恢复滚动位置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<script>
// 当编辑按钮被点击时，记录当前滚动位置到 Cookie
document.addEventListener('click', function (event) {
    if (event.target && event.target.name == 'edit_button') {
        document.cookie = "scrollPosition=" + window.scrollY;
    }
});

// 在页面加载时，从 Cookie 中获取并设置滚动位置
window.addEventListener('load', function () {
    var scrollPosition = getCookie("scrollPosition");
    if (scrollPosition) {
        window.scrollTo(0, parseInt(scrollPosition));
        document.cookie = "scrollPosition=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"; // 清除 Cookie
    }
});

// 辅助函数：从 Cookie 中获取指定名称的值
function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<script>
// 当页面滚动时，记录当前滚动位置到 Cookie
window.addEventListener('scroll', function () {
    document.cookie = "scrollPosition=" + window.scrollY;
});

// 在页面加载时，从 Cookie 中获取并设置滚动位置
window.addEventListener('load', function () {
    var scrollPosition = getCookie("scrollPosition");
    if (scrollPosition) {
        window.scrollTo(0, parseInt(scrollPosition));
        document.cookie = "scrollPosition=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"; // 清除 Cookie
    }
});

// 辅助函数：从 Cookie 中获取指定名称的值
function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}
</script>

方法三：

以上两种方法可以保持body的的滚动位置不变，如果想保持页面中的class为quotes_table的div滚动位置不变，则可使用以下js。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
    // 当编辑按钮被点击时，记录当前滚动位置到 Session Storage
    document.addEventListener('click', function (event) {
        if (event.target && event.target.name == 'edit_button') {
            var scrollPosition = document.querySelector('.quotes_table').scrollTop;
            sessionStorage.setItem('scrollPosition', scrollPosition);
        }
    });

    // 在页面加载时，从 Session Storage 中获取并设置滚动位置
    window.addEventListener('load', function () {
        var scrollPosition = sessionStorage.getItem('scrollPosition');
        if (scrollPosition) {
            document.querySelector('.quotes_table').scrollTop = parseInt(scrollPosition);
            sessionStorage.removeItem('scrollPosition'); // 移除 Session Storage 中的值
        }
    });
</script>

方法四：

也可使用方法二来保持页面中class为quotes_table的div滚动位置不变。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<script>
    // 当编辑按钮被点击时，记录当前滚动位置到 Cookie
    document.addEventListener('click', function (event) {
        if (event.target && event.target.name == 'edit_button') {
            var scrollPosition = document.querySelector('.quotes_table').scrollTop;
            document.cookie = "scrollPosition=" + scrollPosition;
        }
    });

    // 在页面加载时，从 Cookie 中获取并设置滚动位置
    window.addEventListener('load', function () {
        var scrollPosition = getCookie("scrollPosition");
        if (scrollPosition) {
            document.querySelector('.quotes_table').scrollTop = parseInt(scrollPosition);
            document.cookie = "scrollPosition=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"; // 清除 Cookie
        }
    });

    // 辅助函数：从 Cookie 中获取指定名称的值
    function getCookie(name) {
        var cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = cookies[i].trim();
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
</script>