jQuery faire défiler jusqu'à l'élément

2328

J'ai cet inputélément:

<input type="text" class="textfield" value="" id="subject" name="subject">

Ensuite, j'ai d'autres éléments, comme d'autres entrées de texte, des zones de texte, etc.

Lorsque l'utilisateur clique dessus inputavec #subject, la page doit défiler jusqu'au dernier élément de la page avec une belle animation. Ce devrait être un défilement vers le bas et non vers le haut.

Le dernier élément de la page est un submitbouton avec #submit:

<input type="submit" class="submit" id="submit" name="submit" value="Ok, Done.">

L'animation ne doit pas être trop rapide et doit être fluide.

J'utilise la dernière version de jQuery. Je préfère ne pas installer de plugin mais utiliser les fonctionnalités jQuery par défaut pour y parvenir.

javascript jquery scroll

— DiegoP.
source

3

developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

— Christophe Roussy

scrollToa été désactivé pour moi à cause d'un plugin Chrome, je ne sais pas lequel.

— Jacksonkr

4025

En supposant que vous disposez d'un bouton avec l'ID button, essayez cet exemple:

$("#button").click(function() {
    $([document.documentElement, document.body]).animate({
        scrollTop: $("#elementtoScrollToID").offset().top
    }, 2000);
});

J'ai obtenu le code de l'article Faites défiler en douceur vers un élément sans plugin jQuery . Et je l'ai testé sur l'exemple ci-dessous.

<html>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function (){
            $("#click").click(function (){
                $('html, body').animate({
                    scrollTop: $("#div1").offset().top
                }, 2000);
            });
        });
    </script>
    <div id="div1" style="height: 1000px; width 100px">
        Test
    </div>
    <br/>
    <div id="div2" style="height: 1000px; width 100px">
        Test 2
    </div>
    <button id="click">Click me</button>
</html>

Développer l'extrait

— Steve
source

24

Cela ne fonctionnera pas dans tous les cas. Voir stackoverflow.com/questions/2905867/…

— Jānis Elmeris

7

@BarryChapman pas exactement. Après avoir googlé, j'ai trouvé cela , donc les deux balises sont nécessaires si vous ne voulez pas avoir de logique supplémentaire par type de navigateur.

— s3m3n

73

Si vous ne voulez pas d'animation et que vous souhaitez plutôt passer instantanément à l'élément, utilisez .scrollTop(…)plutôt que .animate({scrollTop: …}, …).

— Rory O'Kane

11

En plus de votre solution (qui fonctionne très bien), vous pouvez ajouter une fonction complète qui ajoute le hashtag à l'url. Dans ce cas, il ne défilera pas, car scrollTo a déjà défilé vers la bonne position, et si un utilisateur copie l'URL, il s'alignera automatiquement au bon endroit sur la page.

— Sander

10

si vous utilisez un rappel pour exécuter une fois l'animation terminée et que le rappel se déclenche deux fois avec cette solution, essayez d'utiliser "$ ('html body'). animate (..." au lieu de "$ ('html, body') .animate (... "la virgule a créé deux événements animés. un pour le html, un pour le corps. vous en voulez vraiment un pour le corps html Merci @TJ Crowder stackoverflow.com/questions/8790752/…

— BoatCode

526

jQuery .scrollTo (): Affichage - Démo, API, Source

J'ai écrit ce plugin léger pour faciliter le défilement des pages / éléments. Il est flexible où vous pouvez passer un élément cible ou une valeur spécifiée. Peut-être que cela pourrait faire partie de la prochaine version officielle de jQuery, qu'en pensez-vous?

Exemples d'utilisation:

$('body').scrollTo('#target'); // Scroll screen to target element

$('body').scrollTo(500); // Scroll screen 500 pixels down

$('#scrollable').scrollTo(100); // Scroll individual element 100 pixels down

Options:

scrollTarget : élément, chaîne ou nombre qui indique la position de défilement souhaitée.

offsetTop : Un nombre qui définit un espacement supplémentaire au-dessus de la cible de défilement.

durée : chaîne ou nombre déterminant la durée de l'animation.

easing : chaîne indiquant la fonction d'accélération à utiliser pour la transition.

complete : une fonction à appeler une fois l'animation terminée.

— Timothy Perez
source

2

Cela fonctionnait jusqu'à une récente mise à jour sur Chrome. J'ai une version qui fonctionne que j'utilise actuellement sur memoryboxweddings.com/photography-posts (si vous voulez l'essayer). Je publierai une mise à jour une fois qu'elle sera corrigée.

— Timothy Perez

Corrigé, il s'avère que c'était en fait un fichier JS de jquery.com qui le tuait. Devrait fonctionner maintenant si vous l'essayez.

— Timothy Perez

4

@ TimothyPerez: Je suis sûr que cela signifie quelque chose de permissif pour une utilisation commerciale? Je suis sûr qu'il y a beaucoup de gens qui voudraient simplement utiliser cet extrait de code n'importe où dans leurs sites Web et qui les aideraient à dormir un peu plus facilement la nuit? Peut-être que quelque chose comme la licence MIT pourrait répondre à vos besoins? en.wikipedia.org/wiki/MIT_License

— Robert Massaioli

13

$ ('body') ne fonctionnait pas dans FF, donc essayé $ ('html, body') qui fonctionnait.

— kiranvj

5

Si quelqu'un a besoin de cette source de script, alors ici vous pouvez l'obtenir flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js

— Arturs

370

Si vous n'êtes pas très intéressé par l'effet de défilement fluide et simplement intéressé par le défilement vers un élément particulier, vous n'avez pas besoin d'une fonction jQuery pour cela. Javascript a couvert votre cas:

https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView

Il vous suffit donc de: $("selector").get(0).scrollIntoView();

.get(0) est utilisé parce que nous voulons récupérer l'élément DOM de JavaScript et non l'élément DOM de JQuery.

— Atharva
source

12

Pourriez-vous également utiliser $(selector)[0]?

— RobW

16

RobW, oui, vous pouvez simplement utiliser [0], mais get (0) vous protège contre les index non définis ou négatifs. Voir la source: james.padolsey.com/jquery/#v=1.10.2&fn=jQuery.fn.get

— corbacho

21

Si vous ne voulez pas du tout utiliser jQuery, utilisez simplement document.getElementById('#elementID').scrollIntoView(). Inutile de charger une bibliothèque de ~ 100k juste pour sélectionner un élément, puis le convertir en JavaScript standard.

— Gavin

62

@Gavin Je suis sûr que vous vouliez dire:document.getElementById('elementID').scrollIntoView()

— Brian

3

Cool. Mais avant d'utiliser, assurez-vous que le navigateur le prend en charge. Selon Mozilla "Ceci est une technologie expérimentale"

— Tejasvi Hegde

48

Utilisation de ce script simple

if($(window.location.hash).length > 0){
        $('html, body').animate({ scrollTop: $(window.location.hash).offset().top}, 1000);
}

Faire en sorte que si une balise de hachage est trouvée dans l'url, le scrollTo s'anime vers l'ID. Si aucune balise de hachage n'a été trouvée, ignorez le script.

— Warface
source

$(window.location.hash)ne fonctionnera pas pour les hachages qui ne répondent pas à la détection d'ID de regex de jQuery. Par exemple, des hachages contenant des nombres. C'est aussi un peu dangereux; le format de l'entrée doit être validé afin que vous ne finissiez pas par sélectionner un élément différent.

— dchacke

35

jQuery(document).ready(function($) {
  $('a[href^="#"]').bind('click.smoothscroll',function (e) {
    e.preventDefault();
    var target = this.hash,
        $target = $(target);

    $('html, body').stop().animate( {
      'scrollTop': $target.offset().top-40
    }, 900, 'swing', function () {
      window.location.hash = target;
    } );
  } );
} );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<ul role="tablist">
  <li class="active" id="p1"><a href="#pane1" role="tab">Section 1</a></li>
  <li id="p2"><a href="#pane2" role="tab">Section 2</a></li>
  <li id="p3"><a href="#pane3" role="tab">Section 3</a></li>
</ul>

<div id="pane1"></div>
<div id="pane2"></div>
<div id="pane3"></div>

Développer l'extrait

— davidcondrey
source

1

Pour le rendre plus universel et pour supprimer le placement inutile de hashtag dans la fenêtre de lien du navigateur, je viens de modifier le code comme ci-dessous:

jQuery(document).ready(function($) {   $(document).on( "click", 'a[href^="#"]', function( e ) {     e.preventDefault();     var target = this.hash,         $target = $(target);    $('html, body').stop().animate({ scrollTop: $target.offset().top - 100}, 1000);   }); });

— bubencode

31

La solution de Steve et Peter fonctionne très bien.

Mais dans certains cas, vous devrez peut-être convertir la valeur en entier. Étrangement, la valeur retournée par $("...").offset().topest parfois dans float.
Utilisation:parseInt($("....").offset().top)

Par exemple:

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: parseInt($("#elementtoScrollToID").offset().top)
    }, 2000);
});

— Tejasvi Hegde
source

22

Une version compacte de la solution "animée".

$.fn.scrollTo = function (speed) {
    if (typeof(speed) === 'undefined')
        speed = 1000;

    $('html, body').animate({
        scrollTop: parseInt($(this).offset().top)
    }, speed);
};

Utilisation de base: $('#your_element').scrollTo();

— Rezgar Cadro
source

22

C'est ainsi que je le fais.

document.querySelector('scrollHere').scrollIntoView({ behavior: 'smooth' })

Fonctionne dans n'importe quel navigateur.

Il peut facilement être enveloppé dans une fonction

function scrollTo(selector) {
    document.querySelector(selector).scrollIntoView({ behavior: 'smooth' })
}

Voici un exemple de travail

$(".btn").click(function() {
  document.getElementById("scrollHere").scrollIntoView( {behavior: "smooth" })
})

.btn {margin-bottom: 500px;}
.middle {display: block; margin-bottom: 500px; color: red;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="btn">Scroll down</button>

<h1 class="middle">You see?</h1>

<div id="scrollHere">Arrived at your destination</div>

Développer l'extrait

Documents

— Edvard Åkerberg
source

6

Assez court et doux. Une chose à noter - je pense que cela ne fait que le faire défiler dans la vue (pourrait être au bas de la fenêtre) plutôt que de le faire défiler vers le haut de la fenêtre, comme le fait le réglage de scrollTop.

— OG Sean

20

Je connais un moyen sans jQuery:

document.getElementById("element-id").scrollIntoView();

Edit: Cela fait deux ans et je reçois toujours au hasard la réputation de ce post lmao

— GameMaster1928
source

18

Si vous ne gérez que le défilement vers un élément d'entrée, vous pouvez utiliser focus(). Par exemple, si vous vouliez faire défiler jusqu'à la première entrée visible:

$(':input:visible').first().focus();

Ou la première entrée visible dans un conteneur de classe .error:

$('.error :input:visible').first().focus();

Merci à Tricia Ball de l' avoir signalé!

— Benjamin Oakes
source

17

Avec cette solution, vous n'avez besoin d'aucun plugin et aucune configuration n'est requise en plus de placer le script avant votre </body>balise de fermeture .

$("a[href^='#']").on("click", function(e) {
  e.preventDefault();
  $("html, body").animate({
    scrollTop: $($(this).attr("href")).offset().top
  }, 1000);
});

if ($(window.location.hash).length > 1) {
  $("html, body").animate({
    scrollTop: $(window.location.hash).offset().top
  }, 1000);
}

Au chargement, s'il y a un hachage dans l'adresse, nous y faisons défiler.

Et - chaque fois que vous cliquez sur un alien avec un hrefhachage, par exemple #top, nous y faisons défiler.

— Jonathan
source

Cela devrait probablement être > 1au lieu de 0, simplement parce /#que ce script se casse

— Tallboy

Techniquement, vous ne devriez pas vous retrouver avec une URL de hachage vide à moins que les liens soient mal construits mais TY. (bien que ma propre version de ce code ait déjà ce patch inclus ^^)

— Jonathan

Il existe une gigue associée à ce code, mais il est facilement réparable. Vous devez return false;à la fin de l'événement sur clic pour empêcher l'action par défaut - défiler immédiatement jusqu'à l'ancre - de se produire.

— roncli

2

@roncli bon point - alternativement, vous pouvez simplement le fairee.preventDefault();

— Jonathan

e.preventDefault()mais ne met pas à jour le hachage dans l'url en cliquant, c'est toujours une URL sans hachage

— jayasurya_j

8

Dans la plupart des cas, il serait préférable d'utiliser un plugin. Sérieusement. Je vais vanter le mien ici . Bien sûr, il y en a d'autres aussi. Mais veuillez vérifier s'ils évitent vraiment les pièges pour lesquels vous voudriez un plugin en premier lieu - pas tous.

J'ai écrit sur les raisons d'utiliser un plugin ailleurs . En un mot, la doublure qui sous-tend la plupart des réponses ici

$('html, body').animate( { scrollTop: $target.offset().top }, duration );

est mauvais UX.

L'animation ne répond pas aux actions de l'utilisateur. Il continue même si l'utilisateur clique, touche ou essaie de faire défiler.
Si le point de départ de l'animation est proche de l'élément cible, l'animation est douloureusement lente.
Si l'élément cible est placé près du bas de la page, il ne peut pas défiler vers le haut de la fenêtre. L'animation de défilement s'arrête alors brusquement, au milieu du mouvement.

Pour gérer ces problèmes (et bien d'autres ), vous pouvez utiliser l'un de mes plugins , jQuery.scrollable . L'appel devient alors

$( window ).scrollTo( targetPosition );

et c'est tout. Bien sûr, il y a plus d'options .

En ce qui concerne le poste cible, $target.offset().topfait le travail dans la plupart des cas. Mais sachez que la valeur retournée ne prend pas htmlen compte l' élément ( voir cette démo ). Si vous avez besoin que la position cible soit précise en toutes circonstances, il est préférable d'utiliser

targetPosition = $( window ).scrollTop() + $target[0].getBoundingClientRect().top;

Cela fonctionne même si une bordure sur l' htmlélément est définie.

— hashchange
source

8

Animations:

// slide to top of the page
$('.up').click(function () {
    $("html, body").animate({
        scrollTop: 0
    }, 600);
    return false;
});

// slide page to anchor
$('.menutop b').click(function(){
    //event.preventDefault();
    $('html, body').animate({
        scrollTop: $( $(this).attr('href') ).offset().top
    }, 600);
    return false;
});

// Scroll to class, div
$("#button").click(function() {
    $('html, body').animate({
        scrollTop: $("#target-element").offset().top
    }, 1000);
});

// div background animate
$(window).scroll(function () {

    var x = $(this).scrollTop();

    // freezze div background
    $('.banner0').css('background-position', '0px ' + x +'px');

    // from left to right
    $('.banner0').css('background-position', x+'px ' +'0px');

    // from right to left
    $('.banner0').css('background-position', -x+'px ' +'0px');

    // from bottom to top
    $('#skills').css('background-position', '0px ' + -x + 'px');

    // move background from top to bottom
    $('.skills1').css('background-position', '0% ' + parseInt(-x / 1) + 'px' + ', 0% ' + parseInt(-x / 1) + 'px, center top');

    // Show hide mtop menu  
    if ( x > 100 ) {
    $( ".menu" ).addClass( 'menushow' );
    $( ".menu" ).fadeIn("slow");
    $( ".menu" ).animate({opacity: 0.75}, 500);
    } else {
    $( ".menu" ).removeClass( 'menushow' );
    $( ".menu" ).animate({opacity: 1}, 500);
    }

});

// progres bar animation simple
$('.bar1').each(function(i) {
  var width = $(this).data('width');  
  $(this).animate({'width' : width + '%' }, 900, function(){
    // Animation complete
  });  
});

8

Si vous souhaitez faire défiler un conteneur de débordement (au lieu de $('html, body')répondre ci-dessus), en travaillant également avec un positionnement absolu, voici la façon de procéder:

var elem = $('#myElement'),
    container = $('#myScrollableContainer'),
    pos = elem.position().top + container.scrollTop() - container.position().top;

container.animate({
  scrollTop: pos
}

— FAjir
source

7

Un moyen facile de faire défiler la page pour cibler l'ID de div

var targetOffset = $('#divID').offset().top;
$('html, body').animate({scrollTop: targetOffset}, 1000);

— Irshad Khan
source

6

Ceci est mon approche abstraite des ID et des href, en utilisant un sélecteur de classe générique

$(function() {
  // Generic selector to be used anywhere
  $(".js-scroll-to").click(function(e) {

    // Get the href dynamically
    var destination = $(this).attr('href');

    // Prevent href=“#” link from changing the URL hash (optional)
    e.preventDefault();

    // Animate scroll to destination
    $('html, body').animate({
      scrollTop: $(destination).offset().top
    }, 500);
  });
});

<!-- example of a fixed nav menu -->
<ul class="nav">
  <li>
    <a href="#section-1" class="nav-item js-scroll-to">Item 1</a>
  </li>
  <li>
    <a href="#section-2" class="nav-item js-scroll-to">Item 2</a>
  </li>
  <li>
    <a href="#section-3" class="nav-item js-scroll-to">Item 3</a>
  </li>
</ul>

Développer l'extrait

— vascogaspar
source

6

Plugin jQuery personnalisé très simple et facile à utiliser. Ajoutez simplement l'attribut scroll=à votre élément cliquable et définissez sa valeur sur le sélecteur vers lequel vous souhaitez faire défiler.

Comme ceci: <a scroll="#product">Click me</a>. Il peut être utilisé sur n'importe quel élément.

(function($){
    $.fn.animateScroll = function(){
        console.log($('[scroll]'));
        $('[scroll]').click(function(){
            selector = $($(this).attr('scroll'));
            console.log(selector);
            console.log(selector.offset().top);
            $('html body').animate(
                {scrollTop: (selector.offset().top)}, //- $(window).scrollTop()
                1000
            );
        });
    }
})(jQuery);

// RUN
jQuery(document).ready(function($) {
    $().animateScroll();
});

// IN HTML EXAMPLE
// RUN ONCLICK ON OBJECT WITH ATTRIBUTE SCROLL=".SELECTOR"
// <a scroll="#product">Click To Scroll</a>

— DevWL
source

4

var scrollTo = function($parent, $element) {
    var topDiff = $element.position().top - $parent.position().top;

    $parent.animate({
        scrollTop : topDiff
    }, 100);
};

— kayz1
source

4

$('html, body').animate(...) ne fonctionne pas pour moi sur iphone, navigateur safari chrome android.

J'ai dû cibler l'élément de contenu racine de la page.

$ ('# cotnent'). animate (...)

Voici ce que j'ai fini avec

if (navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/)) {           
    $('#content').animate({
    scrollTop: $("#elementtoScrollToID").offset().top
   }, 'slow');
}
else{
    $('html, body').animate({
    scrollTop: $("#elementtoScrollToID").offset().top
    }, 'slow');
}

Tout le contenu du corps est connecté avec une div #content

<html>
....
<body>
<div id="content">
....
</div>
</body>
</html>

— Shahdat
source

Vous ne devriez vraiment pas utiliser le reniflement d'agent utilisateur. webaim.org/blog/user-agent-string-history

— Alex Podworny

Ajouter un mot-break: break-all; à votre élément CSS qui est en difficulté. Position de jQuery.animate ({scrollTop: y}) webview Android / iOS incorrecte. medium.com/@ellery.leung/…

— daliaessam

4

Voici la réponse d'Atharva de: https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView . Je voulais juste ajouter si votre document est dans un iframe, vous pouvez choisir un élément dans le cadre parent pour faire défiler la vue:

 $('#element-in-parent-frame', window.parent.document).get(0).scrollIntoView();

— cynya
source

3

$('html, body').animate({scrollTop: 
  Math.min( 
    $(to).offset().top-margintop, //margintop is the margin above the target
    $('body')[0].scrollHeight-$('body').height()) //if the target is at the bottom
}, 2000);

3

Lorsque l'utilisateur clique sur cette entrée avec #subject, la page doit défiler jusqu'au dernier élément de la page avec une belle animation. Ce devrait être un défilement vers le bas et non vers le haut.

Le dernier élément de la page est un bouton d'envoi avec #submit

$('#subject').click(function()
{
    $('#submit').focus();
    $('#subject').focus();
});

Cela fera d'abord défiler vers le bas pour #submitrestaurer ensuite le curseur sur l'entrée sur laquelle vous avez cliqué, ce qui imite un défilement vers le bas et fonctionne sur la plupart des navigateurs. Il ne nécessite pas non plus jQuery car il peut être écrit en JavaScript pur.

Cette façon d'utiliser la focusfonction peut-elle mieux imiter l'animation, en enchaînant les focusappels. Je n'ai pas testé cette théorie, mais elle ressemblerait à ceci:

<style>
  #F > *
  {
    width: 100%;
  }
</style>

<form id="F" >
  <div id="child_1"> .. </div>
  <div id="child_2"> .. </div>
  ..
  <div id="child_K"> .. </div>
</form>

<script>
  $('#child_N').click(function()
  {
    $('#child_N').focus();
    $('#child_N+1').focus();
    ..
    $('#child_K').focus();

    $('#child_N').focus();
  });
</script>

— Khaled.K
source

3

J'ai mis en place un module scroll-element npm install scroll-element . Cela fonctionne comme ceci:

import { scrollToElement, scrollWindowToElement } from 'scroll-element'

/* scroll the window to your target element, duration and offset optional */
let targetElement = document.getElementById('my-item')
scrollWindowToElement(targetElement)

/* scroll the overflow container element to your target element, duration and offset optional */
let containerElement = document.getElementById('my-container')
let targetElement = document.getElementById('my-item')
scrollToElement(containerElement, targetElement)

Rédigé avec l'aide des messages SO suivants:

Voici le code:

export const scrollToElement = function(containerElement, targetElement, duration, offset) {
  if (duration == null) { duration = 1000 }
  if (offset == null) { offset = 0 }

  let targetOffsetTop = getElementOffset(targetElement).top
  let containerOffsetTop = getElementOffset(containerElement).top
  let scrollTarget = targetOffsetTop + ( containerElement.scrollTop - containerOffsetTop)
  scrollTarget += offset
  scroll(containerElement, scrollTarget, duration)
}

export const scrollWindowToElement = function(targetElement, duration, offset) {
  if (duration == null) { duration = 1000 }
  if (offset == null) { offset = 0 }

  let scrollTarget = getElementOffset(targetElement).top
  scrollTarget += offset
  scrollWindow(scrollTarget, duration)
}

function scroll(containerElement, scrollTarget, duration) {
  let scrollStep = scrollTarget / (duration / 15)
  let interval = setInterval(() => {
    if ( containerElement.scrollTop < scrollTarget ) {
      containerElement.scrollTop += scrollStep
    } else {
      clearInterval(interval)
    }
  },15)
}

function scrollWindow(scrollTarget, duration) {
  let scrollStep = scrollTarget / (duration / 15)
  let interval = setInterval(() => {
    if ( window.scrollY < scrollTarget ) {
      window.scrollBy( 0, scrollStep )
    } else {
      clearInterval(interval)
    }
  },15)
}

function getElementOffset(element) {
  let de = document.documentElement
  let box = element.getBoundingClientRect()
  let top = box.top + window.pageYOffset - de.clientTop
  let left = box.left + window.pageXOffset - de.clientLeft
  return { top: top, left: left }
}

— svnm
source

2

Pour afficher l'élément complet (si c'est possible avec la taille de fenêtre actuelle):

var element       = $("#some_element");
var elementHeight = element.height();
var windowHeight  = $(window).height();

var offset = Math.min(elementHeight, windowHeight) + element.offset().top;
$('html, body').animate({ scrollTop: offset }, 500);

— Roman Shamritskiy
source

2

J'ai écrit une fonction à usage général qui fait défiler jusqu'à un objet jQuery, un sélecteur CSS ou une valeur numérique.

Exemple d'utilisation:

// scroll to "#target-element":
$.scrollTo("#target-element");

// scroll to 80 pixels above first element with class ".invalid":
$.scrollTo(".invalid", -80);

// scroll a container with id "#my-container" to 300 pixels from its top:
$.scrollTo(300, 0, "slow", "#my-container");

Le code de la fonction:

/**
* Scrolls the container to the target position minus the offset
*
* @param target    - the destination to scroll to, can be a jQuery object
*                    jQuery selector, or numeric position
* @param offset    - the offset in pixels from the target position, e.g.
*                    pass -80 to scroll to 80 pixels above the target
* @param speed     - the scroll speed in milliseconds, or one of the
*                    strings "fast" or "slow". default: 500
* @param container - a jQuery object or selector for the container to
*                    be scrolled. default: "html, body"
*/
jQuery.scrollTo = function (target, offset, speed, container) {

    if (isNaN(target)) {

        if (!(target instanceof jQuery))
            target = $(target);

        target = parseInt(target.offset().top);
    }

    container = container || "html, body";
    if (!(container instanceof jQuery))
        container = $(container);

    speed = speed || 500;
    offset = offset || 0;

    container.animate({
        scrollTop: target + offset
    }, speed);
};

— isapir
source

2

Pour ce que ça vaut, c'est ainsi que j'ai réussi à obtenir un tel comportement pour un élément général qui peut être à l'intérieur d'un DIV avec défilement. Dans notre cas, nous ne faisons pas défiler le corps entier, mais seulement des éléments particuliers avec débordement: auto; dans une disposition plus grande.

Il crée une fausse entrée de la hauteur de l'élément cible, puis y met l'accent, et le navigateur se charge du reste, quelle que soit la profondeur de la hiérarchie déroulante. Fonctionne comme un charme.

var $scrollTo = $('#someId'),
inputElem = $('<input type="text"></input>');

$scrollTo.prepend(inputElem);
inputElem.css({
  position: 'absolute',
  width: '1px',
  height: $scrollTo.height()
});
inputElem.focus();
inputElem.remove();

— martinh_kentico
source

2

Cela a fonctionné pour moi:

var targetOffset = $('#elementToScrollTo').offset().top;
$('#DivParent').animate({scrollTop: targetOffset}, 2500);

— Polaris
source

2

jQuery(document).ready(function($) {
  $('a[href^="#"]').bind('click.smoothscroll',function (e) {
    e.preventDefault();
    var target = this.hash,
        $target = $(target);

    $('html, body').stop().animate( {
      'scrollTop': $target.offset().top-40
    }, 900, 'swing', function () {
      window.location.hash = target;
    } );
  } );
} );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<ul role="tablist">
  <li class="active" id="p1"><a href="#pane1" role="tab">Section 1</a></li>
  <li id="p2"><a href="#pane2" role="tab">Section 2</a></li>
  <li id="p3"><a href="#pane3" role="tab">Section 3</a></li>
</ul>

<div id="pane1"></div>
<div id="pane2"></div>
<div id="pane3"></div>

Développer l'extrait

— Minguocode
source

2

BON MOT

subject.onclick = e=> window.scroll({ top: submit.offsetTop, behavior: 'smooth'});

Afficher l'extrait de code

subject.onclick = e=> window.scroll({top: submit.offsetTop, behavior: 'smooth'});

.box,.foot{display: flex;background:#fdf;padding:500px 0} .foot{padding:250px}

<input type="text" class="textfield" value="click here" id="subject" name="subject">

<div class="box">
  Some content
  <textarea></textarea>
</div>

<input type="submit" class="submit" id="submit" name="submit" value="Ok, Done.">

<div class="foot">Some footer</div>

Développer l'extrait

— Kamil Kiełczewski
source

1

ça marche parfaitement!

— jjoselon

1

Réponse mise à jour en 2019:

$('body').animate({
    scrollTop: $('#subject').offset().top - $('body').offset().top + $('body').scrollTop()
}, 'fast');

— stardust4891
source

Vous devez ce sélecteur pour le corps: [document.documentElement, document.body] ET Pas besoin de décalage du corps dans l'équation. $ ('# subject'). offset (). top est suffisant.

— ali6p