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

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;
        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>
效果如图,点击回到顶部:
当页面出现滚动条时,点击置顶的特效_第1张图片

你可能感兴趣的:(当页面出现滚动条时,点击置顶的特效)