为了账号安全,请及时绑定邮箱和手机立即绑定

手机端怎么实现返回顶部效果呢?我用的sui 框架 a的锚点功能不能用,有没有js方法?

手机端怎么实现返回顶部效果呢?我用的sui 框架 a的锚点功能不能用,有没有js方法?

慕姐8265434 2018-11-08 18:14:11
如题,因为用了sui框架,a的锚点链接效果没作用,虽然我禁用了路由功能,还是不行 请问有没有js方法实现返回顶部?或者哪位大神熟悉sui框架 我该怎么实现呢?
查看完整描述

1 回答

?
汪汪一只猫

TA贡献1898条经验 获得超8个赞

    //当滚动条的位置处于距顶部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>

<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;

        }

      div{

          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>

<div id="div">

 我是主体内容

</div>

<div class="fix" id="back-to-top">

  返回顶部

</div>

</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>


查看完整回答
反对 回复 2018-12-08
  • 1 回答
  • 0 关注
  • 1025 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信