滚动显示置顶按钮

来源：互联网发布：怎样提高淘宝店排名编辑：程序博客网时间：2024/05/22 06:59

主要就是下面这个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="<?=Yii::$app->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代码如下:

<!DOCTYPE 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">1</div>    <!--这个直接用首页返回顶部的图标  -->    <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>

阅读全文

0 0