Maison > interface Web > tutoriel CSS > le corps du texte

css pour obtenir un retour rapide au premier effet

王林
Libérer: 2020-06-02 09:47:18
avant
6516 Les gens l'ont consulté

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>
Copier après la connexion

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>
Copier après la connexion

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

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

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>
Copier après la connexion

code jQuery :

function goTop(min_height) {
    $(".goTop").click(
        function() {
            $(&#39;html,body&#39;).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();
});
Copier après la connexion

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;
}
Copier après la connexion

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!

Étiquettes associées:
css
source:jb51.net
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal