web-dev-qa-db-fra.com

Faites défiler jusqu'à un élément spécifique à l'aide de HTML

Existe-t-il une méthode en HTML qui fait défiler la page Web vers un élément spécifique à l'aide de HTML!?

html5css3
15
M1rwen

Oui vous utilisez ceci

<a href="#google"></a>

<div id="google"></div>

Mais cela ne crée pas un défilement lisse pour que vous sachiez.

24
EasyBB

Vous devez indiquer si vous souhaitez que défile en douceur ou simplement saut à un élément . Sauter est facile et peut être effectué simplement avec HTML ou Javascript. Le plus simple consiste à utiliser l'ancre. La limitation est que chaque élément que vous voulez faire défiler doit avoir une id. Un effet secondaire est que #theID sera ajouté à l'URL

<a href="#scroll">Go to Title</a>
<div>
  <h1 id="scroll">Title</h1>
</div>

Vous pouvez ajouter des effets CSS à la cible lorsque vous cliquez sur le lien avec le sélecteur CSS :target.

Avec certains JS de base, vous pouvez en faire plus, à savoir la méthode scrollIntoView(). Vos éléments n’ont pas besoin d’identifiant, même s’il est toujours plus facile, par exemple.

function onLinkClick() {
  document.getElementsByTagName('h2')[3].scrollIntoView();
  // will scroll to 4th h3 element
}

Enfin, si vous avez besoin d'un défilement régulier, vous devriez jeter un coup d'œil à JS Smooth Scroll ou cet extrait pour jQuery. (NB: il y en a probablement beaucoup plus).

12
Tyblitz

Ajoutez ceci à votre javascript:

$('.smooth-goto').on('click', function() {  
    $('html, body').animate({scrollTop: $(this.hash).offset().top - 50}, 1000);
    return false;
});

De plus, n'oubliez pas d'ajouter cette classe à votre balise a aussi:

<a href="#id-of-element" class="smooth-goto">Text</a>
8
Pedram Vdl
<!-- HTML -->
<a href="#google"></a>
<div id="google"></div>

/*CSS*/
html { scroll-behavior: smooth; }

De plus, vous pouvez ajouter html {scroll-behavior: smooth; } à votre CSS pour créer un défilement régulier.

2
devsam247

Oui, vous pouvez utiliser un anchor en spécifiant l'attribut id d'un élément, puis en le liant avec un hash.

Par exemple (tiré de la spécification W3):

You may read more about this in <A href="#section2">Section Two</A>.
...later in the document
<H2 id="section2">Section Two</H2>
...later in the document
<P>Please refer to <A href="#section2">Section Two</A> above
for more details.
1
Ben

En utilisant un attribut href à l'intérieur d'une balise d'ancrage, vous pouvez faire défiler la page vers un élément spécifique en utilisant un # devant le nom de l'élément.

En outre, voici quelques jQuery/JS qui permettront de placer des variables dans un div.

<html>
<body>

Click <a href="#myContent">here</a> to scroll to the myContent section.

<div id="myContent">
...
</div>

<script>
    var myClassName = "foo";

    $(function() {
        $("#myContent").addClass(myClassName);
    });
</script>

</body>
0
Nicolas