javascript - smoothly - window animate scroll jquery




jQuery fait défiler jusqu'à l'élément (16)

J'ai cet élément d' input :

<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 sur cette input avec #subject , la page doit faire défiler jusqu'au dernier élément de la page avec une animation sympa. Cela devrait être un défilement vers le bas et non vers le haut.

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

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

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

Je cours 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.


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

Le dernier élément de la page est un bouton de soumission avec #submit

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

Cela fera d'abord défiler jusqu'à #submit puis restaurera le curseur sur l'entrée sur laquelle vous #submit cliqué, ce qui simule 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.

Est-ce que cette façon d'utiliser la fonction de focus imiter l'animation d'une meilleure façon, en enchaînant les appels de focus . Je n'ai pas testé cette théorie, mais cela 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>

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
  });  
});

C'est ma méthode d'abstraction de l'ID et de l'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écouvrez le plugin ScrollTo . Vous pouvez voir la démo .

J'espère que ça aide.


En supposant que vous avez un bouton avec le button id, essayez cet exemple:

$("#button").click(function() {
    $('html, 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>


En utilisant 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 hash est trouvée dans l'url, le scrollTo s'anime à l'ID. Si ce n'est pas la balise de hachage trouvée, ignorez le script.


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)

Écrit avec l'aide des publications suivantes de l'OS:

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 }
}

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

Mais dans certains cas, vous devrez peut-être convertir la valeur en nombre entier. Etrangement, la valeur renvoyée par $("...").offset().top est parfois en float .
Utilisez: parseInt($("....").offset().top)

Par exemple:

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

Pour afficher l'élément complet (si c'est possible avec la taille de la 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);

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

Il crée une fausse entrée de la hauteur de l'élément cible, puis met l'accent sur celui-ci, et le navigateur prendra soin du reste, quelle que soit la profondeur de la hiérarchie défilante que vous êtes. 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();

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

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

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

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

Merci à Tricia Ball de l' avoir signalé!


Si vous voulez faire défiler dans un conteneur de débordement (au lieu de $('html, body') ci-dessus), en travaillant aussi avec le positionnement absolu, voici la façon de faire:

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

container.animate({
  scrollTop: pos
}

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();


jQuery .scrollTo ():

J'ai écrit ce plugin léger pour faciliter le défilement des pages / éléments. C'est flexible où vous pouvez transmettre un élément cible ou une valeur spécifiée. Peut-être que cela pourrait faire partie de la prochaine sortie 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 : Un élément, une chaîne ou un nombre qui indique la position de défilement souhaitée.

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

duration : Une chaîne ou un nombre déterminant la durée d'exécution de l'animation.

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

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


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>


$('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);




jquery