recherche

Maison  >  Article  >  interface Web  >  Résumé des méthodes de jQuery pour obtenir des effets de saut en douceur des points d'ancrage dans page_jquery

Résumé des méthodes de jQuery pour obtenir des effets de saut en douceur des points d'ancrage dans page_jquery

WBOY
WBOYoriginal
2016-05-16 15:59:561335parcourir

Habituellement, lorsque nous faisons défiler la navigation vers le contenu, nous le faisons via des points d'ancrage. Il suffit de glisser et de passer directement au contenu sans aucun effet de défilement. De plus, le lien URL aura une "petite queue" à la fin, tout comme #keleyi Aujourd'hui, je vais vous présenter un effet spécial de défilement créé par jquery, qui peut non seulement définir la vitesse de défilement, mais aussi n'avoir pas de "petite queue" sur le lien URL. 

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>jQuery实现页面内锚点平滑跳转</title><base target="_blank" /> 
<style type="text/css"> 
#hovertree { 
height: 800px; 
background: red; 
text-align:center;color:white; 
} 
 
#keleyi { 
height: 800px; 
background: green;text-align:center;color:white; 
} 
 
#myslider { 
height: 800px; 
background: black;text-align:center;color:white; 
} 
 
#zonemenu { 
height: 800px; 
background: yellow;text-align:center; 
} 
 
.keleyilink{position:fixed;} 
.keleyilink a {text-decoration:none;} 
</style> 
</head> 
<body> 
<div class="keleyilink"> 
<a href="javascript:scroll('hovertree');" target="_self">HoverTree</a> 
<a href="javascript:scroll('keleyi');" target="_self">KKK</a> 
<a href="javascript:scroll('myslider');" target="_self">myslider</a> 
<a href="javascript:scroll('zonemenu');" target="_self">ZoneMenu</a> 
</div> 
<div id="hovertree">hovertree 
<br /><br /><br /><a href="">原文</a> <a href="">JJJ</a> <a href="http://hovertree.com">HoverTree</a> <a href="/">特效库</a> 
</div> 
<div id="keleyi">jb51</div> 
<div id="myslider">myslider</div> 
<div id="zonemenu">zonemenu</div> 
<script src="jquery/jquery-1.11.3.min.js"></script> 
<script src="jquery.hovertreescroll.js"></script> 
<script> 
function scroll(id) { 
$("#" + id).HoverTreeScroll(1000); 
} 
</script> 
</body> 
</html>

Une méthode de mise en œuvre plus simple :

Le code ne comporte qu'une seule phrase

Copier le code Le code est le suivant :

$("html,body").animate({scrollTop: $("#elementid").offset().top}, 1000);

La méthode animate() est utilisée pour implémenter un ensemble d'animations personnalisées CSS. Il existe deux méthodes d'appel

.

Le premier formulaire accepte 4 paramètres, comme indiqué ci-dessous

.animate(propriétés [, durée] [, assouplissement] [, complet] )

propriétés – une carte contenant les propriétés et les valeurs de style
durée – paramètre de vitesse facultatif, qui peut être soit une chaîne prédéfinie, soit une valeur en milliseconde
easing – Le type d'assouplissement facultatif jQuery n'a que deux types par défaut : swing et linéaire. Pour utiliser d'autres effets, vous devez installer un plug-in d'assouplissement
. complet – fonction de rappel facultative, appelée à la fin de l'animation

Un exemple du premier formulaire est le suivant

.animate({property1: 'value1', property2: 'value2'},
    speed, easing, function() {
      alert('The animation is finished.');
    });

Le code pour implémenter le saut de point d'ancrage dans cet article utilise la première forme

$("html,body") représente l'animation d'éléments HTML ou body, c'est-à-dire la modification de leurs valeurs d'attribut CSS
scrollTop est la valeur de l'attribut à modifier, qui représente la distance de glissement de la barre de défilement. Ici, elle représente la hauteur du code HTML (corps) caché par le haut du navigateur après avoir abaissé la barre de défilement du navigateur
. $("#elementid").offset().top est la hauteur du code HTML (corps) qui doit être masqué par le haut du navigateur. Il représente la distance absolue entre le haut de l'élément avec l'identifiant elementid et. le haut de la page Web (pas le haut de la zone visible du navigateur) .
1000 signifie que le temps d'animation est de 1 seconde

La méthode animate() possède également un deuxième formulaire d'appel

.animate(propriétés, options)

L'un est le mappage d'attributs et l'autre est le mappage d'options. En fait, le deuxième paramètre encapsule ici les 2 à 4 paramètres du premier formulaire dans un autre mappage et ajoute deux options. Le code du deuxième formulaire est le suivant : 

.animate({
  property1: 'value1',
  property2: 'value2'
}, {
  duration: 'value',
  easing: 'value',
  complete: function(){
    alert('The animation is finished.');
  },
  queue: boolen,
  step: callback
});

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.

Déclaration：
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
Article précédent：Méthode JavaScript pour changer de fenêtre de connexion en cliquant sur les compétences text_javascriptArticle suivant：Méthode JavaScript pour changer de fenêtre de connexion en cliquant sur les compétences text_javascript

Articles Liés

Voir plus