我正在尝试使用以下代码刷新我的网页并保持其滚动位置:
function refreshPage() {
var page_y = document.getElementsByTagName("body")[0].scrollTop;
window.location.href = window.location.href.split('?')[0] + '?page_y=' + page_y;
}
window.onload = function() {
setTimeout(refreshPage, 35000);
if ( window.location.href.indexOf('page_y') != -1 ) {
var match = window.location.href.split('?')[1].split("&")[0].split("=");
document.getElementsByTagName("body")[0].scrollTop = match[1];
}
}
虽然这成功添加了 ?page_y=scrollposition 并且滚动位置准确,并且我可以成功地将 match 和 match[1] 打印到控制台,但唯一的问题是它不滚动页面。
编辑:
显然,该脚本是在我的脚本生成网页内容之前加载的,我不太清楚为什么。下面发布完整代码:
<script>
$(window).load(function(){
$.getJSON("sun.json", function(json1) {
$.each(json1, function(key, data) {
document.body.innerHTML +=
"<div id='" + data.video + "' class='caption' data-source='" + data.video + "' data-title='" + data.title + "' data-desc='" + data.description + "' onclick='parent.changeVideo(dataset.source, dataset.title, dataset.desc); reloadImg()'>" +
"<img class='thumbnail' src='" + data.thumb + "' alt='" + data.title + "'>" +
"<div class='caption-text'>" +
"<b class='caption-title'>" + data.title + "</b>" +
data.description +
"</div>" +
"</div>" +
"<hr>"
console.log("This should be first");
$(".caption").hover(function(){
$(this).find(".caption-text").fadeIn(400);
},
function(){
$(this).find(".caption-text").fadeOut(400);
});
});
});
});
var scroll = $(window).scrollTop();
// yada
$("html").scrollTop(scroll);
function changeVid() {
document.querySelector("#current-video_html5_api").src = data.video
console.log(data.video);
}
</script>
<script>
function refreshPage() {
var page_y = document.getElementsByTagName("body")[0].scrollTop;
window.location.href = window.location.href.split('?')[0] + '?page_y=' + page_y;
}
var match = window.location.href.split('?')[1].split("&")[0].split("=");
window.onload = function() {
setTimeout(refreshPage, 35000);
if ( window.location.href.indexOf('page_y') != -1 ) {
//document.getElementsByTagName("body")[0].scrollTop = match[1];
window.scrollTo(0, match[1]);
console.log(match[1]);
console.log("This should come second");
}
}
</script>
最佳答案
您可以使用window.scrollTo:
function refreshPage() {
var page_y = document.getElementsByTagName("body")[0].scrollTop;
window.location.href = window.location.href.split('?')[0] + '?page_y=' + page_y;
}
window.onload = function() {
setTimeout(refreshPage, 35000);
if ( window.location.href.indexOf('page_y') != -1 ) {
var match = window.location.href.split('?')[1].split("&")[0].split("=");
window.scrollTo(0, match[1]);
}
}
关于Javascript 保持滚动位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31252814/