滚动显示置顶按钮

主要就是下面这个div,里面包含了1个置顶按钮和一个Yii2的返回跳转按钮

<div id="scrollSearchDiv" style="width: 40px;
        height: 40px;
        line-height: 40px;
        border: solid 1px #07AC72;
        display: none;
        position: fixed;
        right: 30px;
        bottom: 150px;
        text-align: center;
        font-size: 12px;
        color: #fff;">
        <div class="row">
            <a href="#"><span class="glyphicon glyphicon-chevron-up">span>a>
        div>
        <div class="row">
            <a href="request->referrer?>" class="btn btn-default btn-sm">返回a>
        div>
div>

和他的滚动判定JS

<script type="text/javascript">
    $(function() {
        //绑定滚动条事件 
        $(window).bind("scroll", function() {
            var sTop = $(window).scrollTop();
            var sTop = parseInt(sTop);
            if (sTop >= 130) {
                if (!$("#scrollSearchDiv").is(":visible")) {
                    try {
                        $("#scrollSearchDiv").slideDown();
                    } catch (e) {
                        $("#scrollSearchDiv").show();
                    }
                }
            } else {
                if ($("#scrollSearchDiv").is(":visible")) {
                    try {
                        $("#scrollSearchDiv").slideUp();
                    } catch (e) {
                        $("#scrollSearchDiv").hide();
                    }
                }
            }
        });
    })
script>

简单Html代码如下:


<head>
    <style type="text/css">
        body {
            max-width: 640px;
            margin: 0 auto
        }

        .div1 {
            background: #D5D4D4;
            height: 5000px;
        }

        #scrollSearchDiv {
            width: 40px;
            height: 40px;
            line-height: 40px;
            border: solid 1px #07AC72;
            display: none;
            position: fixed;
            right: 30px;
            bottom: 30px;
            text-align: center;
            font-size: 12px;
            color: #fff;
        }
    style>
head>

<body>
    <div class="div1">1div>

    
    <div id="scrollSearchDiv"><a href="#">^a>div>

    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js">script>

    <script type="text/javascript">
        $(function() {
            //绑定滚动条事件 
            $(window).bind("scroll", function() {
                var sTop = $(window).scrollTop();
                var sTop = parseInt(sTop);
                if (sTop >= 130) {
                    if (!$("#scrollSearchDiv").is(":visible")) {
                        try {
                            $("#scrollSearchDiv").slideDown();
                        } catch (e) {
                            $("#scrollSearchDiv").show();
                        }
                    }
                } else {
                    if ($("#scrollSearchDiv").is(":visible")) {
                        try {
                            $("#scrollSearchDiv").slideUp();
                        } catch (e) {
                            $("#scrollSearchDiv").hide();
                        }
                    }
                }
            });
        })
    script>
body>
html>

你可能感兴趣的:(前端)