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

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

ringa_lee
ringa_lee

ringa_lee

全部回复(1)
Peter_Zhu
    //当滚动条的位置处于距顶部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>
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板