首頁  >  問答  >  主體

javascript - 手機端要怎麼實現回頂端效果? (手機端捲軸會隱藏,無法偵測)我用的sui 框架 a的錨點功能不能用,有沒有js方法?

如題,因為用了sui框架,a的錨點連結效果沒作用,雖然我禁用了路由功能,還是不行請問有沒有js方法實現返回頂部?或者哪位大神熟悉sui框架我該怎麼實現呢?

ringa_leeringa_lee2683 天前1126

全部回覆(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
  • 取消回覆