communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
javascript - Comment obtenir un effet de retour en haut sur un téléphone mobile? (La barre de défilement sur le téléphone mobile sera masquée et ne pourra pas être détectée) La fonction d'ancrage du framework sui a que j'utilise ne peut pas être utilisée. Existe-t-il une méthode js ?
ringa_lee
ringa_lee 2017-05-16 13:31:29
0
1
1258

Comme le titre l'indique, parce que le framework sui est utilisé, l'effet de lien d'ancrage de a n'a aucun effet. Bien que j'aie désactivé la fonction de routage, cela ne fonctionne toujours pas. Existe-t-il une méthode js pour revenir en haut ? y a-t-il un maître qui connaît le framework sui ? Comment puis-je y parvenir ?

ringa_lee
ringa_lee

ringa_lee

répondre à tous(1)
Peter_Zhu
Peter_Zhu2017-05-16 13:33:29 1 plancher 
    //当滚动条的位置处于距顶部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;
        });
    });

J'ai écrit une petite démo qui peut être déclenchée

<!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>
Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal