Javascript页面重新加载，同时保持当前窗口位置 [英] Javascript page reload while maintaining current window position

问题描述

如何使用Javascript刷新页面，而不会将页面返回到
顶部。

How do I refresh the page using Javascript without the page returning to the top.

我的页面使用计时器刷新，但问题是它出现了问题每次重新加载时都会回到顶端。它应该能够在重新加载时保留页面的当前位置。

My page refreshes using a timer but the problem is it goes back to the top every time it reloads. It should be able to retain the current position of the page as it reloads.

P.S。
如果有必要，欢迎额外的鼠标事件成为您建议的一部分。
我实际上想的是 #idname 以刷新为目标，但我的HTML元素没有ID，只有类。

P.S. Additional mouse events are welcome if necessary to be a part of your suggestion. I'm actually thinking of #idname to target on refresh but my HTML elements don't have IDs, only classes.

推荐答案

如果您使用JavaScript，此代码就可以解决问题。

If you use JavaScript, this code will do the trick.

var cookieName = "page_scroll";
var expdays = 365;

// An adaptation of Dorcht's cookie functions.

function setCookie(name, value, expires, path, domain, secure) {
    if (!expires) expires = new Date();
    document.cookie = name + "=" + escape(value) + 
        ((expires == null) ? "" : "; expires=" + expires.toGMTString()) +
        ((path    == null) ? "" : "; path=" + path) +
        ((domain  == null) ? "" : "; domain=" + domain) +
        ((secure  == null) ? "" : "; secure");
}

function getCookie(name) {
    var arg = name + "=";
    var alen = arg.length;
    var clen = document.cookie.length;
    var i = 0;
    while (i < clen) {
        var j = i + alen;
        if (document.cookie.substring(i, j) == arg) {
            return getCookieVal(j);
        }
        i = document.cookie.indexOf(" ", i) + 1;
        if (i == 0) break;
    }
    return null;
}

function getCookieVal(offset) {
    var endstr = document.cookie.indexOf(";", offset);
    if (endstr == -1) endstr = document.cookie.length;
    return unescape(document.cookie.substring(offset, endstr));
}

function deleteCookie(name, path, domain) {
    document.cookie = name + "=" +
        ((path   == null) ? "" : "; path=" + path) +
        ((domain == null) ? "" : "; domain=" + domain) +
        "; expires=Thu, 01-Jan-00 00:00:01 GMT";
}

function saveScroll() {
    var expdate = new Date();
    expdate.setTime(expdate.getTime() + (expdays*24*60*60*1000)); // expiry date

    var x = document.pageXOffset || document.body.scrollLeft;
    var y = document.pageYOffset || document.body.scrollTop;
    var data = x + "_" + y;
    setCookie(cookieName, data, expdate);
}

function loadScroll() {
    var inf = getCookie(cookieName);
    if (!inf) { return; }
    var ar = inf.split("_");
    if (ar.length == 2) {
        window.scrollTo(parseInt(ar[0]), parseInt(ar[1]));
    }
}

这可以通过使用cookie来记住滚动位置。

This works by using a cookie to remember the scroll position.

现在只需添加

onload="loadScroll()" onunload="saveScroll()"

到你的身体标签，一切都会好的。

to your body tag and all will be well.

来源： http://www.huntingground.freeserve.co.uk/main/mainfram.htm?../scripts/cookies/scrollpos.htm

这篇关于Javascript页面重新加载，同时保持当前窗口位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！