简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - Wie erreiche ich den Return-to-Top-Effekt auf einem Mobiltelefon? (Die Bildlaufleiste auf dem Mobiltelefon wird ausgeblendet und kann nicht erkannt werden.) Die Ankerfunktion des von mir verwendeten Sui-Frameworks kann nicht verwendet werden. Gibt es eine js-Methode?
ringa_lee
ringa_lee 2017-05-16 13:31:29
0
1
1122

Da das Sui-Framework verwendet wird, hat der Anker-Link-Effekt keine Auswirkung. Obwohl ich die Routing-Funktion deaktiviert habe, funktioniert sie immer noch nicht Gibt es einen Meister, der mit dem Sui-Framework vertraut ist? Wie soll ich es implementieren?

ringa_lee
ringa_lee

ringa_lee

Antworte allen(1)
Peter_Zhu
Peter_Zhu2017-05-16 13:33:29 1 Etage 
    //当滚动条的位置处于距顶部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>
Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！