Faites défiler en haut à l'aide de jQuery (temps de configuration: 2 minutes)

Créez rapidement le site Web à la fonction de défilement supérieure (Temps de réglage: 2 minutes)

Ce guide vous guidera étape par étape comment configurer la fonction arrière vers le haut de votre site Web. Faites défiler cette page pour afficher la démo.

1. Téléchargez le plugin Scrollto et incluez-le.
2. Obtenez une image (flèche ou similaire).
3. contient le code HTML suivant.
4. contient le code jQuery / JavaScript suivant pour capturer le défilement de la fenêtre et traiter l'affichage des images.
5. c'est aussi simple!

html

<code class="language-html"><a id="scroll-to-top" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">
    <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174036397399855.png" class="lazy" alt="Scroll to Top Using jQuery (Setup time: 2mins) ">
</a></code>

jQuery

Ce code jQuery affichera l'image lorsque l'utilisateur fait défiler vers le bas, masquer l'image lors du défilement vers le haut et de gérer les événements de clic.

<code class="language-javascript">$(document).ready(function() {
    var $scrollTop = $('https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bscroll-to-top');

    $(window).scroll(function() {
        // 向上滚动
        if ($(this).scrollTop() > 100) {
            $scrollTop.fadeIn(1000);
        } else {
            $scrollTop.hide();
        }
    });

    $scrollTop.click(function(e) {
        e.preventDefault();
        $.scrollTo(0, 1000); // 使用scrollTo插件
    });
});</code>

Remarque: Si vous avez besoin d'une solution compatible entre le navigateur croisé, utilisez le code suivant:

<code class="language-javascript">window.scrollTo(0, 0); // Chrome滚动到顶部错误修复</code>

CSS

Ce code CSS simple est utilisé pour gérer l'affichage des images et la transparence du croisement.

<code class="language-css">https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bscroll-to-top {
    position: fixed;
    bottom: 10px;
    right: 10px;
    display: none;
    opacity: 0.5; /* 简化透明度设置 */
    transition: opacity 0.3s ease; /* 添加平滑过渡效果 */
}

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bscroll-to-top:hover {
    opacity: 1.0; /* 简化透明度设置 */
}</code>

jQuery ScrollTop FAQS (FAQS)

Comment utiliser jQuery ScrollTop pour faire défiler vers un élément spécifique sur la page?

Pour utiliser jQuery ScrollTop pour faire défiler vers un élément spécifique sur la page, vous devez d'abord sélectionner l'élément à l'aide du sélecteur jQuery, puis utiliser la méthode ScrollTop. Voici un exemple:

<code class="language-javascript">$('html, body').animate({
    scrollTop: $("https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bmyElement").offset().top
}, 2000);</code>

Dans ce code, "https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bmyelement" est l'ID de l'élément que vous souhaitez faire défiler, et 2000 est la durée de l'animation Scroll en milliais. Cela fait défiler en douceur la page à l'élément spécifié en 2 secondes.

Puis-je utiliser jQuery ScrollTop sans animation?

Oui, vous pouvez utiliser jQuery ScrollTop sans animation. La méthode animée de jQuery n'est pas requise pour ScrollTop. Voici comment le faire:

<code class="language-javascript">$('html, body').scrollTop($("https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bmyElement").offset().top);</code>

Cela fait immédiatement défiler la page à l'élément spécifié.

(Le contenu FAQ ultérieur est cohérent avec le texte d'origine, en omettant des pièces en double pour éviter la redondance.)

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!