Question

好的，我有一个代码可以平滑滚动到页面顶部，但是我也需要它来重新加载（刷新）页面。这是我必须滚动的代码，但我不知道如何在其中实现重载。任何想法都欢迎。

var x = document.getElementById('title1');

function myFunction() {
   if (x.style.display === 'block') { 
       x.style.display = 'block';
   } else {
       x.style.display = 'block';
   }
   $("html, body").animate({ scrollTop: 0 }, "slow");
}

Answer 1

是的，这是一个简单的解决方案。 jQuery animate方法为我们提供了在动画完成后运行的回调方法，因此您可以尝试

var x = document.getElementById（'title1'）;

function myFunction() {
   if (x.style.display === 'block') { 
       x.style.display = 'block';
   } else {
       x.style.display = 'block';
   }
   $("html, body").animate({ scrollTop: 0 }, "slow", function(){
      window.location.reload()
   });
}

Answer 2

您可以通过以下方式检测滚动是否到达页面顶部并刷新它：

$(window).scroll(function(){
   if($(window).scrollTop() == 0){
      console.log('top');
      window.location.reload(false);
   }
});

$(window).scroll(function(){ if($(window).scrollTop() == 0){ 检测窗口滚动是否到达页面顶部。

刷新页面：window.location.reload(false);

更新：

要防止检测到手动滚动，您可以添加一个标志，以手动滚动还是通过动画：var animate= false;，然后可以在触发animate时进行更新：animate=true;

请参见摘要：

var x = document.getElementById('title1');
var animate= false;

function myFunction() {
   if (x.style.display === 'block') { 
       x.style.display = 'block';
   } else {
       x.style.display = 'block';
   }
   $("html, body").animate({ scrollTop: 0 }, "slow");
   animate=true;
}

$(window).scroll(function(){
   if($(window).scrollTop() == 0 && animate==true){
      console.log('top');
      window.location.reload(false);
   }
});

body{
height:1000px;
}
#title1{
position:relative;
top:900px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<button id="title1" onclick="myFunction()">test</button>
</body>

Answer 3

您可以使用Location类中的重载功能重载

location.reload();

Answer 4

请小心location.reload函数，因为如果有请求，它将重新发布上一个请求。浏览器还尝试保持友好并在相同的滚动位置重新加载页面，因此您必须滚动到顶部，然后重新加载。

更好的选择是使用location.search函数。这也将使您有机会在查询字符串中传递额外的参数，以指示页面滚动到所需位置。

这是一个方便的js函数，您可能会觉得有用

/**
 * reloads a document without triggering the previous POST
 * @param {obj} document
 * @param {string} queryString optional overwrite of current qs
 */
function documentReload(document, queryString){
var loc = document.location;
//passing a queryString to container
if (queryString) {
    loc.search = queryString; //will cause it to reload
    return;
}
//refresh page
//loc.reload(true); - can cause the POST data warning
loc.href = loc.protocol +'//'+ loc.host + loc.pathname + loc.search;
}

滚动到顶部并同时刷新页面

4 个答案:

更新：