常见需求

最新推荐文章于 2021-08-03 15:48:20 发布

大个子小可爱

最新推荐文章于 2021-08-03 15:48:20 发布

阅读量115

点赞数

分类专栏： html系列

本文链接：https://blog.csdn.net/weixin_44628533/article/details/102460621

版权

html系列专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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');  // 重置上次选中的元素
});

大个子小可爱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
常见需求

1. 禁用浏览器的刷新行为window.onload = function () { window.addEventListener('beforeunload', function (e) { e.preventDefault(); e.returnValue = ''; });}2. 回到顶部效果<body> <...
复制链接

扫一扫

专栏目录