详解网页刷新页面滚动条不变锚点不变
2017-02-23| 程成| 2973| 2| jQuery/JS

今天遇到这样一个需求,如果需要从a页面跳到b页面的某个中间位置,但是在b页面滚动后再刷新发现滚动不到想要指定的高度或者锚点位置。这是因为浏览器默认情况下刷新当前页面,会保留当前的滚动条位置,至少我发现了好几个浏览器都是的。正常情况下,跳到b页面指定位置最简单的方法是如下两个:


1、b页面加个锚点<a name="锚点名"></a>,a跳转链接地址后面加上“#锚点名”;


2、或者jquery方法,在b页面想要停顿的地方添加一个class或者id,然后添加如下一句js


$("html,body").animate({scrollTop:$(".class").offset().top},0);


现在的问题是,刷新b页面后发现锚点不变。这个时候只需要自定义刷新事件,把自己想要触发的事件写到刷新方法中就可以了,这里就是滚动到指定锚点或者滚动条位置,代码如下:


window.onbeforeunload = function(){
    $("html,body").animate({scrollTop:$(".class").offset().top},0);
}


此方法完美解决页面刷新初始化滚动条位置方法。如果有其他的方法,欢迎补充~

×
作者:程成
QQ:492245711