首页  >  问答  >  正文

javascript - 手机端怎么实现返回顶部效果呢?(手机端滚动条会隐藏,无法检测)我用的sui 框架 a的锚点功能不能用,有没有js方法?

如题,因为用了sui框架,a的锚点链接效果没作用,虽然我禁用了路由功能,还是不行 请问有没有js方法实现返回顶部?或者哪位大神熟悉sui框架 我该怎么实现呢?

ringa_leeringa_lee2734 天前1200

全部回复(1)我来回复

  • 天蓬老师

    天蓬老师2017-05-16 13:33:29

        //当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失
        $(function () {
            $(window).scroll(function () {
                if ($(window).scrollTop() > 100) {
                    $("#back-to-top").fadeIn(1000);
                    console.log($(window).scrollTop())
                    console.log(window.innerHeight)
                }
                else {
                    $("#back-to-top").fadeOut(1000);
                }
            });
            //当点击跳转链接后,回到页面顶部位置
            $("#back-to-top").click(function () {
                $('body,html').animate({scrollTop: 0}, 1000);
                return false;
            });
        });

    我写了小demo 明明就可以触发

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
        <meta name="keywords" content=""/>
        <meta name="description" content=""/>
        <meta name="robots" content="all">
        <meta name="renderer" content="webkit">
        <style>
            *{
                margin: 0;padding: 0;
            }
          p{
              width: 100%;
              height:1880px;
              background: #BDBDBD;
          }
            .fix{
                width: 50px;
                height:50px;
                background: #B72712;
                position: fixed;
                right: 0;
                bottom: 50px;
                color: #ffffff;
                font-size: 18px;
                text-align: center;
                display: none;
            }
        </style>
    </head>
    <body>
    <p id="p">
     我是主体内容
    </p>
    <p class="fix" id="back-to-top">
      返回顶部
    </p>
    </body>
    <script src="jquery.js"></script>
    <script>
    $(function () {
        $(window).scroll(function () {
            if ($(window).scrollTop() > 100) {
                $("#back-to-top").fadeIn(1000);
                console.log($(window).scrollTop())
                console.log(window.innerHeight)
            }
            else {
                $("#back-to-top").fadeOut(1000);
            }
        });
        //当点击跳转链接后,回到页面顶部位置
        $("#back-to-top").click(function () {
            $('body,html').animate({scrollTop: 0}, 1000);
            return false;
        });
    });
    
    </script>
    </html>

    回复
    0
  • 取消回复