Javascript 什么'；在页面刷新时让浏览器重置滚动位置的最佳做法是什么？问题_Javascript_Jquery_Html_Css

Javascript 什么'；在页面刷新时让浏览器重置滚动位置的最佳做法是什么？问题

javascript jquery html css

Javascript 什么'；在页面刷新时让浏览器重置滚动位置的最佳做法是什么？问题,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在创建一个相当简单的投资组合。我有一个导航栏在顶部，有几个导航链接。其中一个是“关于我”，单击会自动提示页面跳转到html div节标记，元素id为#About Me。URL也会更改，并在末尾附加#about me 刷新页面时，url保持不变，因此页面不会向上滚动到顶部，而是在重新加载时显示相同的位置。我相信这是由于浏览器自动使用缓存造成的？（如果我错了，请纠正我）正确处理此问题的最佳方法是什么一些可能的解决办法当DOM完成加载并准备好进行操作时，使用jQuery.ready（）函数立

我正在创建一个相当简单的投资组合。我有一个导航栏在顶部，有几个导航链接。其中一个是“关于我”，单击会自动提示页面跳转到html div节标记，元素id为

#About Me

。URL也会更改，并在末尾附加

#about me

刷新页面时，url保持不变，因此页面不会向上滚动到顶部，而是在重新加载时显示相同的位置。我相信这是由于浏览器自动使用缓存造成的？（如果我错了，请纠正我）

正确处理此问题的最佳方法是什么

一些可能的解决办法

当DOM完成加载并准备好进行操作时，使用jQuery

.ready（）

函数立即调用一个函数，该函数将自动将

window.location.href

设置为源URL，从而重置滚动位置

阻止浏览器缓存。（我认为这有一个缺点，特别是如果我希望我的站点的其他部分在以后使用缓存的话？）

所以我找到了一个非常简单的答案，以防有人想知道。阻止事件的默认行为将阻止url在末尾添加哈希，然后必须添加代码才能使滚动正常工作，因为阻止默认行为也将阻止导航链接正常工作。但是在页面刷新时，页面将从顶部开始，只要您忽略在animate函数的末尾添加hash

发件人：


$（文档）.ready（函数（）{
//添加平滑滚动到所有链接
$（“a”）。在（'click'，函数（事件）{
//在覆盖默认行为之前，请确保this.hash具有值
如果（this.hash！==“”）{
//防止默认锚点单击行为
event.preventDefault（）；
//存储散列
var hash=this.hash；
//使用jQuery的animate（）方法添加平滑页面滚动
//可选数字（800）指定滚动到指定区域所需的毫秒数
$（'html，body'）。设置动画({
scrollTop:$（散列）.offset（）.top
}，800，函数（）{
//只需省略这一行代码即可刷新页面
//从页面顶部开始
window.location.hash=散列；
});
}//如果结束，则结束
});
});
正文，html，.main{
身高：100%；
}
部分{
最小高度：100%；
}

尝试在加载时使用scrollTop:0将滚动位置保存到

localStorage

并在页面刷新时访问此行为得到正确处理，与缓存无关

#about me

被称为锚定，当浏览器通过设计将页面滚动到锚定时。@lolbas谢谢，我理解这是正确的行为，但是，我的印象是页面刷新会重新加载整个DOM（包括样式表和脚本），因此，从原始url开始。但是，页面刷新从原始url开始，并附加上我的页面上次滚动到的部分的id。页面刷新时是否不应重置URL？对不起，如果我把这个问题弄糊涂了。我建议你把问题改为问“如何”，而不是问“最佳实践”或“最佳方式”。最佳实践问题需要基于意见的答案，因此可能会被关闭。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  // Add smooth scrolling to all links
  $("a").on('click', function(event) {

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){

        // Just omit this line of code to in order to have page refresh 
        //start at the top of the page
        window.location.hash = hash;
      });
    } // End if
  });
});
</script>
 <style>
body, html, .main {
    height: 100%;
}

section {
    min-height: 100%;
}
</style>
</head>
<body>

<a href="#section2">Click Me to Smooth Scroll to Section 2 Below</a>

<div class="main">
  <section></section>
</div>

<div class="main" id="section2">
  <section style="background-color:blue"></section>
</div>

</body>
</html>