Maison interface Web js tutoriel jQuery创建平滑的页面滚动(顶部或底部)_jquery

jQuery创建平滑的页面滚动(顶部或底部)_jquery

May 16, 2016 pm 05:41 PM
lisse 页面滚动 haut

在这篇文章中,我将通过本教程向您展示了如何创建一个平滑的滚动效果,使用jQuery。让您可以滚动到你的网页的顶部或底部

它是如何工作的
首先,加载jquery库在 head>标签结束前:

复制代码 代码如下:

jQuery滚动到底部:

链接:
Scroll to bottomjQuery
复制代码 代码如下:



它是如何工作的
第一行代码在页面加载之前执行
$(document).ready(function(){当连接的.scrollToBottom类被点击的时候执行{}里面的动作

$(document).ready(function(){
$('a.scrollToBottom').click(function(){
});
})在这个函数中,执行这个代码
$('html, body').animate({scrollTop: $(document).height()}, 'slow');
return false;当一个链接被点击的代码将在函数内部运行,scrollTop的功能是使用平滑滚动效果。上面的代码将滚动到页面底部,使用窗口的高度,以确定底部高度。使用“slow”,“medium”和“fast”的速度控制,我使用了'slow。
jQuery的滚动到顶部
首先,插入一个链接到你的网页页脚部分,当被点击的jQuery代码将执行。动画的功能。是非常重要的,因为它是在jQuery中引用类的链接。
链接:
Scroll to bottomjQuery
复制代码 代码如下:



它是如何工作的
当在页面加载类。scrollToTop的链接被点击时的jQuery将执行此
$('html, body').animate({scrollTop:0}, 'slow');
return false;.animate()方法使我们能够创建任何数字的CSS属性的动画效果,scrollTop的功能设置为0,这代表了滚动条在最上方的位置,“slow”是指动画将运行的速度,在你会注意到这一行:
return false;这可以防止的默认动作被触发的事件,在我们的例子中,它可以防止用户链接。
也可以这样
复制代码 代码如下:

event.preventDefault();
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

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment implémenter la fonction de défilement de page vers le haut en JavaScript ? Comment implémenter la fonction de défilement de page vers le haut en JavaScript ? Oct 19, 2023 am 11:16 AM

Comment implémenter la fonction de défilement de page vers le haut en JavaScript ? Dans la conception Web, nous avons parfois besoin d'une fonction capable de revenir rapidement en haut de la page afin que l'utilisateur n'ait pas besoin de faire défiler manuellement la page. Cette fonction est généralement implémentée via un bouton « retour en haut ». Dans cet article, je vais vous montrer comment utiliser JavaScript pour obtenir cette fonctionnalité et fournir des exemples de code détaillés. Tout d’abord, nous devons ajouter un élément bouton au fichier HTML pour déclencher la fonction de retour en haut. Par exemple, vous pouvez

L'applet WeChat implémente l'effet de surveillance du défilement des pages L'applet WeChat implémente l'effet de surveillance du défilement des pages Nov 21, 2023 am 08:18 AM

Désolé, je ne peux pas fournir d'exemples de code spécifiques. Si vous souhaitez savoir comment implémenter l'effet de surveillance du défilement des pages dans l'applet WeChat, vous pouvez l'essayer vous-même en suivant les étapes suivantes : Créez un nouveau projet d'applet WeChat. Écrivez la structure de la page dans le fichier wxml, y compris les éléments qui nécessitent une surveillance du défilement. Définissez le style de page dans le fichier wxss, y compris le style de l'élément d'écoute de défilement. Écrivez la logique de surveillance du défilement dans le fichier js et vous pourrez obtenir l'effet de surveillance du défilement en écoutant l'événement de défilement de page. Prévisualisez l'effet via les outils de développement WeChat,

Comment obtenir un effet de défilement fluide avec CSS Comment obtenir un effet de défilement fluide avec CSS Nov 21, 2023 pm 01:13 PM

Comment utiliser CSS pour obtenir un effet de défilement fluide Dans la conception et le développement Web, l'effet de défilement est un effet très courant et intéressant qui peut apporter une meilleure expérience aux utilisateurs. Pour obtenir un effet de défilement fluide, vous pouvez y parvenir grâce à certaines techniques CSS. Cet article explique comment utiliser CSS pour obtenir un effet de défilement fluide et fournit des exemples de code spécifiques. 1. Utilisez des points d'ancrage pour obtenir un défilement fluide des pages internes. Un point d'ancrage est une marque en HTML. Vous pouvez définir une certaine position sur la page comme point d'ancrage et la positionner via la valeur du point d'ancrage dans l'URL. en douceur

PHP implémente des compétences de défilement de page dans l'applet WeChat PHP implémente des compétences de défilement de page dans l'applet WeChat Jun 01, 2023 am 09:40 AM

Ces dernières années, les mini-programmes WeChat sont devenus un élément indispensable de la vie des gens. À mesure que la technologie continue de se mettre à jour, de plus en plus de développeurs commencent à utiliser diverses techniques pour mettre en œuvre de meilleurs mini-programmes. Parmi eux, la technique de défilement des pages en fait partie. Dans les mini-programmes WeChat, les techniques de défilement des pages peuvent offrir une expérience utilisateur plus fluide et améliorer la qualité globale du mini-programme. Dans le processus de mise en œuvre des techniques de défilement des pages, PHP peut également jouer un grand rôle. Ce qui suit explique comment utiliser PHP pour implémenter le défilement des pages dans les mini-programmes WeChat.

Comment obtenir un effet d'arrière-plan de défilement fluide sur les pages Web grâce à du CSS pur Comment obtenir un effet d'arrière-plan de défilement fluide sur les pages Web grâce à du CSS pur Oct 24, 2023 am 09:02 AM

Comment obtenir un effet d'arrière-plan de défilement fluide des pages Web grâce à du CSS pur ? L'arrière-plan est une partie très importante de la conception Web, qui peut améliorer l'effet visuel et l'expérience utilisateur de la page. Les arrière-plans de pages Web traditionnels sont généralement statiques, mais en utilisant la technologie CSS pure, nous pouvons obtenir un effet d'arrière-plan à défilement fluide, ajoutant ainsi un effet visuel plus dynamique et plus vivant à la page Web. Dans cet article, nous présenterons comment utiliser CSS pour obtenir un effet d'arrière-plan de défilement fluide et fournirons des exemples de code spécifiques. 1. Préparation avant de commencer pour obtenir un effet d'arrière-plan à défilement fluide

L'applet WeChat réalise l'effet de faire défiler la page jusqu'à une position spécifiée L'applet WeChat réalise l'effet de faire défiler la page jusqu'à une position spécifiée Nov 21, 2023 pm 12:58 PM

L'applet WeChat implémente l'effet de faire défiler la page jusqu'à une position spécifiée. Des exemples de code spécifiques sont nécessaires. L'applet est une méthode de développement d'applications mobiles très populaire ces dernières années. Sa simplicité et ses hautes performances en font le premier choix de nombreux développeurs. Dans les mini-programmes, il est souvent nécessaire d'obtenir l'effet de défilement jusqu'à une position spécifiée sur la page. Cet article présentera comment implémenter cette fonction dans les mini-programmes et fournira des exemples de code spécifiques. Pour obtenir l'effet de faire défiler la page jusqu'à la position spécifiée, il y a deux aspects principaux du travail : l'un consiste à obtenir les informations de position de l'élément à la position spécifiée, et l'autre consiste à

En JavaScript, est-ce une bonne pratique de mettre toutes les déclarations en haut ? En JavaScript, est-ce une bonne pratique de mettre toutes les déclarations en haut ? Sep 07, 2023 pm 11:01 PM

Oui, c'est une bonne pratique de placer toutes les déclarations JavaScript en haut. Regardons un exemple - Exemple <html> <head> <title>JavaScriptStringmatch()Method</title> </head> <body> &am

Comment utiliser Vue Router pour implémenter le contrôle du comportement de défilement des pages ? Comment utiliser Vue Router pour implémenter le contrôle du comportement de défilement des pages ? Jul 21, 2023 pm 06:49 PM

Comment utiliser VueRouter pour implémenter le contrôle du comportement de défilement des pages ? Lorsque nous utilisons VueRouter pour le développement d'applications monopage, nous devons souvent contrôler le comportement de défilement des pages pour obtenir une expérience utilisateur plus fluide. VueRouter fournit un moyen simple et flexible de contrôler le comportement de défilement des pages. Cet article expliquera comment utiliser VueRouter pour contrôler le comportement de défilement des pages et joindra des exemples de code pour référence. Le comportement de défilement de VueRouter est contrôlé via scr

See all articles