问题描述
我有一个导航栏,当用户向下滚动经过它时,我将其位置设置为固定,而当用户向上滚动经过该点时,使用以下航路点将其设置为固定:
var $navbar = $('.navbar-default');
$navbar.waypoint(function(){
if ($('#navigation-bar').hasClass('navbar')){
$('#navigation-bar').toggleClass('navbar-fixed');
} else{
($('#navigation-bar').toggleClass('navbar'));
}
},{ offset: '28%' });
这可确保导航栏仅在特定点之前停留在用户屏幕上。这在大多数情况下都是按预期方式工作的,但是问题是,如果用户向下滚动到该航点,然后刷新页面,导航栏将跳回到其原始位置,如果您向后滚动,导航栏将导致未定义的行为。 / p>
有没有一种方法可以确保用户刷新时屏幕上的所有内容都保留在相同的位置?
解决方法
页面加载时,您可以使用window.scrollTo
函数
//scrollTo(x,y)
window.scrollTo(0,0);
//the rest of your code...
每次加载页面时,它将滚动到页面的左上角。
编辑:
this问题的答案也可能有用:
* {
overflow-anchor: none;
}