1. 禁用浏览器的刷新行为
window.onload = function () {
window.addEventListener('beforeunload', function (e) {
e.preventDefault();
e.returnValue = '';
});
}
2. 回到顶部效果
<body>
<div id="box">
<p>111111111111111111</p>
...
<p>111111111111111111</p>
</div>
<button id="btn">返回顶部</button>
</body>
- 方法一：简单，代码量最少，但效果生硬！
var btn = document.getElementById('btn');
btn.onclick = function () {
// 页面有滚动条，将横向滚动条移动到相对于窗体宽度为0像素位置，纵向滚动条移动到窗体高度0个像素(如果没有滚动条，页面不会发生任何变化)
window.scrollTo(0, 0);
}
- 方法二：带有缓冲的效果
var btn = document.getElementById('btn');
var scrollTop;
var timer = null;
window.onscroll = function () {
scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //在滚动事件内可以实时获得滚动条距顶部的距离
return scrollTop;
}
btn.onclick = function () {
clearInterval(timer);
// (1) 返回顶部的速度是匀速的
// var now = scrollTop;
// var speed = (0-now)/10;
// speed = speed>0?Math.ceil(speed):Math.floor(speed);
timer = setInterval(function () {
// (2) 速度动态变化，有缓冲的效果
var now = scrollTop;
var speed = (0 - now) / 10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (scrollTop == 0) {
clearInterval(timer);
}
document.documentElement.scrollTop = scrollTop + speed;
document.body.scrollTop = scrollTop + speed;
}, 30)
}
- 方法三：利用jquery，自带动画
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
var btn = document.getElementById('btn');
btn.onclick = function () {
$('body,html').animate({
scrollTop: 0
}, 300)
}
// jquery 动画
$(selector).animate({params},speed,callback);
3. JavaScript刷新页面滚动轴位置不变
一. 情景：在刷新页面后，滚动轴会恢复至最顶端 --> 需求：记录上次滚动轴的
scrolltop,在下次刷新页面后，滚动轴位置不变。二. 刷新页面
scrolltop存放方式：
- 作为
url参数，带到下一个页面- 存放至
cookie
// .m-video-list-wrapper 为元素超出添加了scroll样式
<div class="m-video-list-wrapper" id="scrollPosition">
<div class="videoItem">
<div class="m-list-time">20:13</div>
<div class="m-list-name">视频一 201812180841</div>
</div>
...
</div>
存放scrolltop值
情况1：点击列表中某一个item时刻，记录
scrolltop值 reload页面
$('.videoItem').bind('click', function () {
$(this).addClass('click-border');
$(this).siblings().removeClass('click-border');
// 存储滚动条位置到cookies中
let scrollPos = $('#scrollPosition')[0].scrollTop;
document.cookie = "scrollTop=" + scrollPos;
});
情况2：直接刷新页面，要通过
beforeunload事件去记录即将离开当前页面（刷新或者关闭）时scrolltop值
window.addEventListener("beforeunload", function (event) {
let scrollPos = $('#scrollPosition')[0].scrollTop;
let activedIndex = $(this).index();
document.cookie = "scrollTop=" + scrollPos; //存储滚动条位置到cookies中
document.cookie = "activedIndex=" + activedIndex;
});
获取scrolltop值
方法一：页面初始化时，cookie中获取参数，重置滚动轴的scrolltop位置
$(document).ready(function () {
if (document.cookie.match(/scrollTop=([^;]+)(;|$)/) != null) { //cookies中不为空，则读取滚动条位置
let scrollTop = document.cookie.match(/scrollTop=([^;]+)(;|$)/);
$('#scrollPosition')[0].scrollTop = parseInt(scrollTop[1]);
}
});
方法二：
load事件中，获取cookie值
window.addEventListener("load", function (event) {
if (document.cookie.match(/scrollTop=([^;]+)(;|$)/) != null) {
var arr = document.cookie.match(/scrollTop=([^;]+)(;|$)/);
$('#scrollPosition')[0].scrollTop = parseInt(arr[1]); // 重置scrolltop
}
var activedIndex = document.cookie.match(/activedIndex=([^;]+)(;|$)/);
var videoItem = $(".videoItem");
videoItem.eq(parseInt(activedIndex[1])).addClass('click-border'); // 重置上次选中的元素
});
