javascript - Existe-t-il une méthode plus rapide dans vue.js pour faire défiler l'interface actuelle jusqu'à une certaine partie?

Question

Par exemple, couramment utilisée pour revenir en haut, une page HTML ordinaire peut définir l'attribut href de la balise a sur un certain identifiant, puis faire défiler la barre de défilement jusqu'à cette partie lorsque vous cliquez dessus (bien sûr, vous pouvez également définir directement la hauteur de la barre de défilement) .

Mon exigence actuelle est de cliquer sur différents boutons dans le même composant vue pour faire défiler la barre de défilement jusqu'à la partie correspondante (l'effet de défilement est facultatif). Si vous utilisez directement la méthode mentionnée ci-dessus, cela déclenchera un saut de page. Si vous définissez directement la hauteur de la barre de défilement, vous devrez obtenir les positions une par une, ce qui n'est pas aussi simple que la première.

S'il vous plaît, donnez-moi quelques conseils, avez-vous une meilleure idée pour réaliser cette exigence ?

Answer 1

Element.scrollIntoView()

Il s'agit d'une API native de JS Après l'appel, le navigateur fera défiler jusqu'à la position de l'élément cible.

https://developer.mozilla.org...

Answer 2

Si vous ne pouvez pas utiliser de points d'ancrage, vous ne pouvez obtenir que la position de la barre de défilement de chaque partie.

Answer 3

Vous ne pouvez utiliser que js. Comme suit, obtenez la distance entre l'élément cible et le haut de la page dans l'événement, puis contrôlez l'axe de défilement :

$(window).scrollTop( $("#caaa").offset().top )

Answer 4

D'un point de vue approximatif, la méthode du point d'ancrage est définitivement violente.

Answer 5

Trouvez un plug-in js natif et importez-le

Answer 6

Même question ! Je ne sais pas non plus

Answer 7

https://huahua0406.github.io/...

Il y a un défilement gauche et droit correspondant ci-dessous. Répond-il à vos exigences ?

Answer 8

vue-router2

le routeur a pour fonction de simuler les points d'ancrage