当页面出现滚动条时，点击置顶的特效

最新推荐文章于 2024-05-07 10:58:08 发布

新手新思路新技能

最新推荐文章于 2024-05-07 10:58:08 发布

阅读量2k

点赞数

本文链接：https://blog.csdn.net/u013005675/article/details/69623857

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery-3.0.0.min.js"></script>
</head>
<body>
<style>
    #roll
    {
        z-index:999;
        display: block;
        position: fixed;
        right: 10px;
        bottom: 50px;
        display: none;
        cursor: pointer;
        height: 72px;
        width: 26px;
    }
</style>
<div style="height:115px;width:100%;background-color: black"></div>
<div class="tabBody" id="tupping-content" style="height:615px;width:100%;overflow-x:hidden;overflow-y:auto;">
    <div style="width: 100%;height: 3000px;background-color: #00A0E9">
    </div>
</div>
<div id="roll"><div title="回到顶部" id="roll_top">回到顶部</div></div>
</body>
<script type="text/javascript">
    $(function(){
        $('#roll').click(function () {
            $("#tupping-content").animate({ scrollTop: '0px' },1000);

        });
    });
    var _windowScrollTop;
    jQuery("#tupping-content").scroll(actionEvent).resize(actionEvent);
    function actionEvent() {
        _windowScrollTop = jQuery("#tupping-content").scrollTop();
        if(_windowScrollTop<300){
            $("#roll").css("display","none");
        }else {
            $("#roll").css("display","block");
            $("#roll").css("position","fixed");
            $("#roll").css("right","20px");
            $("#roll").css("bottom","20px");
        }
    }
    jQuery("#tupping-content").scroll();
</script>
</html>

效果如图，点击回到顶部：

新手新思路新技能

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
当页面出现滚动条时，点击置顶的特效

html>html lang="en">head> meta charset="UTF-8"> title>Titletitle> script type="text/javascript" src="jquery-3.0.0.min.js">script>head>body>style> #roll { z-index:999;
复制链接

扫一扫