Javascript 页面重新加载,同时保持当前窗口位置

标签 javascript jquery

如何在不返回页面的情况下使用 Javascript 刷新页面 顶部。

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

附言 如有必要,欢迎使用其他鼠标事件作为您建议的一部分。 我实际上在考虑 #idname 以刷新为目标,但我的 HTML 元素没有 ID,只有类。

最佳答案

如果您使用 JavaScript,这段代码就可以解决问题。

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 来记住滚动位置来实现的。

现在只需添加

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

到你的 body 标签,一切都会好起来的。

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

关于Javascript 页面重新加载,同时保持当前窗口位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7577897/

相关文章:

javascript - Jquery对象不支持属性或方法 "values"

javascript - jQuery Slider - 在 HTML 而不是 Javascript 中更改延迟时间

javascript - 如何通过 Greasemonkey 脚本在 Firefox 中存储数组?

Javascript : Difference between Function and Function. 原型(prototype)

javascript - Telegraf:无法使用 Markdown 样式回复 inlineButtons

javascript - 在流体固定 div 中居中多个元素

javascript - 如何编写一个名为 countDots(x) 的函数,该函数将字符串作为参数并返回它包含的点数 (.)

javascript - $.get 路由未在服务器端调用,并且未返回任何数据,服务器未进行控制台日志记录

javascript - 当模态在 vue 实例之外定义时,Bootstrap 模态不起作用

javascript - 如何根据输入值显示/隐藏多个div?