在JavaScript中,有没有一种方法可以在刷新页面后保持当前的滚动位置?
通常情况下,在刷新页面后会显示页面顶部.. 我不希望这样。
在JavaScript中,有没有一种方法可以在刷新页面后保持当前的滚动位置?
通常情况下,在刷新页面后会显示页面顶部.. 我不希望这样。
beforeunload
(页面刷新函数)上触发ajax,将该值存储为会话变量,然后在GET请求中将其呈现到模板中。
模板:
<script type="text/javascript">
$(window).on('beforeunload', function(){
var scroll_pos = $(document).scrollTop()
$.ajax({
url: window.location.href,
data: {
'scroll_position': scroll_pos
},
dataType: 'json',
});
});
$(window).on('load', function(){
$(document).scrollTop({{ request.session.scroll_position }});
});
</script>
views.py
class YourView(TemplateView)
template_name = "example.html"
def get(self, request, *args, **kwargs):
args = {}
scroll_position = request.session.pop('scroll_position',0)
args.update({'scroll_position':scroll_position})
return render(request, self.template_name, args)
def post(self, request, *args, **kwargs):
if request.is_ajax:
request.session['scroll_position'] = request.POST.get('scroll_position')
return JsonResponse({})
当用户滚动页面时,您可以将当前滚动位置保存在localStorage中,然后在页面刷新后,当您确定所有DOM已创建时,可以从localStorage检索位置并使用它: Element.scrollTop = savedLocation
您还可以使用锚点标签,参见此处: 如何将HTML页面滚动到给定的锚点?
在其他答案的基础上进行补充,以下是实现方法:
//Set scroll position
localStorage.setItem("scroll_position", document.documentElement.scrollTop);
//On document.ready, check if key exists in localStorage
document.ready(function(){
if(localStorage.getItem("scroll_position" != null) {
var scrollPosition = localStorage.getItem("scroll_position");
//Scroll to position
window.scrollTo(0, scrollPosition);
}
});