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

来源：互联网发布：管家婆数据库恢复编辑：程序博客网时间：2024/04/30 23:32

<!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 0