css pour obtenir un retour rapide au premier effet

Contexte :

De nos jours, les sites Web sont essentiellement de longues pages, la plupart d'entre eux ont quatre ou cinq écrans, parfois deux ou trois écrans. Parfois, les pages sont trop longues. . Afin d'améliorer l'expérience utilisateur, un bouton de retour en haut apparaîtra sur le côté droit de la page, afin que vous puissiez revenir rapidement en haut pour éviter qu'un écran visuel n'apparaisse sur la page coulissante. Il existe généralement quatre manières. pour revenir au sommet.

1. Pour revenir en haut via des liens d'ancrage, vous devez ajouter une balise nommée top au corps

<a href="#top" target="_self">回到顶部</a>

2 Pour revenir en haut via le défilement JavaScript, contrôlez l'horizontale et. directions verticales

<a href="javascript:scroll(0,0)">JavaScript回到顶部<s/a>

3. Grâce au contrôle JavaScript, glissez lentement vers le haut, mais ce n'est pas assez fluide

<a onclick="goScrollTop()">JavaScript缓慢向上滑动</a>

function goScrollTop() {
    //把内容滚动指定的像素数（第一个参数是向右滚动的像素数，第二个参数是向下滚动的像素数）
    //向上是负数，向下是正数
    window.scrollBy(0, -100);
    //延时递归调用，模拟滚动向上效果
    scrolldelay = setTimeout('goScrollTop()', 100);
    //获取scrollTop值，声明了DTD的标准网页取document.documentElement.scrollTop，否则取document.body.scrollTop；因为二者只有一个会生效，另一个就恒为0，所以取和值可以得到网页的真正的scrollTop值
    var sTop = document.documentElement.scrollTop + document.body.scrollTop;
    //判断当页面到达顶部，取消延时代码（否则页面滚动到顶部会无法再向下正常浏览页面）
    if (sTop == 0) clearTimeout(scrolldelay);
}

4. Lorsque la barre de défilement défile jusqu'à une certaine position, elle s'affiche. la barre de défilement est annulée, elle est masquée et revient en haut du bouton, cette méthode est la méthode la plus couramment utilisée

<div class="goTop">
    <span>Go</span>
</div>

code jQuery :

function goTop(min_height) {
    $(".goTop").click(
        function() {
            $('html,body').animate({
                scrollTop: 0
            }, 700);
        });
    //获取页面的最小高度，无传入值则默认为600像素
    min_height=min_height?min_height:400;
    //为窗口的scroll事件绑定处理函数
    $(window).scroll(function() {
        //获取窗口的滚动条的垂直位置
        var s = $(window).scrollTop();
        //当窗口的滚动条的垂直位置大于页面的最小高度时，让返回顶部元素渐现，否则渐隐
        if (s > min_height) {
            $(".goTop").fadeIn(100);
        } else {
            $(".goTop").fadeOut(200);
        }
    });
}
 
 
$(function() {
    goTop();
});

code css :

.goTop {
    height: 40px;
    width: 40px;
    background: red;
    border-radius: 50px;
    position: fixed;
    top: 90%;
    right: 3%;
    display: none;
}
 
.goTop span {
    color: #fff;
    position: absolute;
    top: 12px;
    left: 8px;
}

Tutoriel recommandé : Démarrage rapide CSS

Si vous souhaitez télécharger le code de l'effet Retour en haut, veuillez visiter : Retour en haut du code !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!