Question

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

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

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

Answer 1

如果你使用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()"

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

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

Answer 2

如果页面的某些特定部分可能初始“滚动到”点，那么您可以为这些部分分配CSS ID并在末尾刷新附加的ID哈希页面。例如，window.location = http://example.com#section2将重新加载页面并自动将其向下滚动到ID为“section2”的元素。

如果不是那么具体，你可以在.scrollTop()：window上使用jQuery的$(window).scrollTop()方法获取刷新前的当前滚动位置。然后，您可以将其附加到刷新URL，并在检查此页面的页面上包含JS，以便在页面加载时自动滚动到正确的位置：

抓取当前滚动位置

var currentScroll = $(window).scrollTop();
window.location = 'http://example.com#' + currentScroll;

在DOM准备就绪时必须运行的JS，以便检查currentScroll哈希

$(function(){
    if(window.location.hash !== ''){
        var scrollPos = parseInt(window.location.hash.substring(1),10);
        $(window).scrollTo(scrollPos);
    }
});

如果您不喜欢在地址栏中修改URL的想法（因为您确实想要隐藏您出于某种原因从用户那里做的事情），您可以将scrollTo()值存储在一个cookie而不是URL。

Answer 3

您可以使用基于cookie的方法：

<html>
    <head>
        <script type="text/javascript">
            var refreshPeriod = 120; // 120 Seconds

            function refresh()
            {
                document.cookie = 'scrollTop=' + filterScrollTop();
                document.cookie = 'scrollLeft=' + filterScrollLeft();
                document.location.reload(true);
            }

            function getCookie(name)
            {
                var start = document.cookie.indexOf(name + "=");
                var len = start + name.length + 1;

                if(((!start) && (name != document.cookie.substring(0, name.length))) || start == -1)
                    return null;

                var end = document.cookie.indexOf(";", len);

                if(end == -1)
                    end = document.cookie.length;

                return unescape(document.cookie.substring(len, end));
            }

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

            function setupRefresh()
            {
                var scrollTop = getCookie("scrollTop");
                var scrollLeft = getCookie("scrollLeft");

                if (!isNaN(scrollTop))
                {
                    document.body.scrollTop = scrollTop;
                    document.documentElement.scrollTop = scrollTop;
                }

                if (!isNaN(scrollLeft))
                {
                    document.body.scrollLeft = scrollLeft;
                    document.documentElement.scrollLeft = scrollLeft;
                }

                deleteCookie("scrollTop");
                deleteCookie("scrollLeft");

                setTimeout("refresh()", refreshPeriod * 1000);
            }

            function filterResults(win, docEl, body)
            {
                var result = win ? win : 0;

                if (docEl && (!result || (result > docEl)))
                    result = docEl;

                return body && (!result || (result > body)) ? body : result;
            }

            // Setting the cookie for vertical position
            function filterScrollTop()
            {
                var win = window.pageYOffset ? window.pageYOffset : 0;
                var docEl = document.documentElement ? document.documentElement.scrollTop : 0;
                var body = document.body ? document.body.scrollTop : 0;
                return filterResults(win, docEl, body);
            }

            // Setting the cookie for horizontal position
            function filterScrollLeft()
            {
                var win = window.pageXOffset ? window.pageXOffset : 0;
                var docEl = document.documentElement ? document.documentElement.scrollLeft : 0;
                var body = document.body ? document.body.scrollLeft : 0;
                return filterResults(win, docEl, body);
            }
        </script>
    </head>
    <body onload="setupRefresh()">
        <!-- content here -->
    </body>
</html>

或者您可以使用表单方法：

<html>
    <head>
        <script type="text/javascript">
            // Saves scroll position
            function scroll(value)
            {
                var hidScroll = document.getElementById('hidScroll');
                hidScroll.value = value.scrollTop;
            }

            // Moves scroll position to saved value
            function scrollMove(el)
            {
                var hidScroll = document.getElementById('hidScroll');
                document.getElementById(el).scrollTop = hidScroll.value;
            }
        </script>
    </head>
    <body onload="scrollMove('divScroll');" onunload="document.forms(0).submit()";>
        <form>
            <input type="text" id="hidScroll" name="a"><br />
            <div id="divScroll" onscroll="scroll(this);"
                 style="overflow:auto;height:100px;width:100px;">
                <!-- content here -->
            </div>
        </form>
    </body>
</html>

仅取决于您的应用程序的要求和限制。

Answer 4

我建议只使用ajax刷新您感兴趣的页面部分。我的意思是，只需使用javascript替换内容，具体取决于ajax调用的响应。我想说你看一下jQuery的ajax或get方法。

如果您可以提供有关您尝试做的更多信息，我可以提供更多帮助。无论如何，我希望这有点帮助。

干杯！

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

4 个答案: