国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Community

Learn

Tools Library

AI Tools

Leisure

English

javascript - How to achieve the return to top effect on the mobile phone? (The scroll bar on the mobile phone will be hidden and cannot be detected) The anchor function of the sui framework a I use cannot be used. Is there a js method?

ringa_lee 2017-05-16 13:31:29

1371

Like the title, because the sui framework is used, the anchor link effect of a has no effect. Although I disabled the routing function, it still doesn’t work. Is there any js method to return to the top? Or is there any master who is familiar with the sui framework, how should I achieve it? ?

ringa_lee

reply all(1)

Peter_Zhu2017-05-16 13:33:29 1 floor

    //當(dāng)滾動(dòng)條的位置處于距頂部100像素以下時(shí)，跳轉(zhuǎn)鏈接出現(xiàn)，否則消失
    $(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);
            }
        });
        //當(dāng)點(diǎn)擊跳轉(zhuǎn)鏈接后，回到頁(yè)面頂部位置
        $("#back-to-top").click(function () {
            $('body,html').animate({scrollTop: 0}, 1000);
            return false;
        });
    });

I wrote a small demo that can be triggered

<!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">
 我是主體內(nèi)容
</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);
        }
    });
    //當(dāng)點(diǎn)擊跳轉(zhuǎn)鏈接后，回到頁(yè)面頂部位置
    $("#back-to-top").click(function () {
        $('body,html').animate({scrollTop: 0}, 1000);
        return false;
    });
});

</script>
</html>

Like +0

Add Reply