Vraag jQuery ga naar element


ik heb dit input element:

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

Dan heb ik een aantal andere elementen, zoals andere tekstinvoer, tekstgebieden, enz.

Wanneer de gebruiker daarop klikt input met #subject, de pagina moet naar het laatste element van de pagina gaan met een leuke animatie. Het moet een scroll naar beneden zijn en niet naar boven.

Het laatste item van de pagina is a submit knop met #submit:

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

De animatie moet niet te snel zijn en moet vloeiend zijn.

Ik gebruik de nieuwste jQuery-versie. Ik installeer liever geen plug-ins maar gebruik de standaard jQuery-functies om dit te bereiken.


1871
2017-07-13 09:49


oorsprong


antwoorden:


Er vanuit gaande dat je een knop hebt met het ID button, probeer dit voorbeeld:

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

Ik kreeg de code van het artikel Schuif soepel naar een element zonder een jQuery-plug-in. En ik heb het getest in het onderstaande voorbeeld.

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


3478
2017-07-13 09:52



  jQuery .scrollTo() Method 

jQuery .scrollTo ():  Beeld - Demo, API, bron

Ik schreef deze lichtgewicht plug-in om pagina- / element scrollen veel gemakkelijker te maken. Het is flexibel waar u een doelelement of een opgegeven waarde kunt doorgeven. Misschien kan dit een onderdeel zijn van de volgende officiële release van jQuery, wat denk je ervan?


Gebruik van voorbeelden:

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

opties:

scrollTarget: Een element, tekenreeks of nummer dat de gewenste schuifpositie aangeeft.

offsetTop: Een getal dat aanvullende spatiëring boven het schuifdoel definieert.

looptijd: Een tekenreeks of nummer dat bepaalt hoe lang de animatie wordt uitgevoerd.

versoepeling: Een tekenreeks die aangeeft welke versmellingsfunctie moet worden gebruikt voor de overgang.

compleet: Een functie om te bellen zodra de animatie is voltooid.


453
2017-10-05 08:50



Als je niet zozeer geïnteresseerd bent in het effect van de scroll-scrolling en alleen geïnteresseerd bent in scrollen naar een bepaald element, heb je hiervoor geen enkele jQuery-functie nodig. Javascript heeft uw zaak gedekt:

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

Dus alles wat u hoeft te doen is: $("selector").get(0).scrollIntoView(); 

.get(0) wordt gebruikt omdat we het DOM-element van JavaScript willen ophalen en niet het DOM-element van JQuery.


267
2017-12-24 11:35



Bekijk de ScrollTo inpluggen. Je kunt de demo zien hier.

Ik hoop dat het helpt.


42
2017-07-13 11:05



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>


26
2017-07-18 18:06



Met behulp van dit eenvoudige script

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

Zou in sort maken dat als er een hash-tag wordt gevonden in de url, de scrollTo naar de ID animeert. Als er geen hash-tag is gevonden, negeer dan het script.


26
2017-09-05 11:53



De oplossing van Steve en Peter werkt heel goed.

Maar in sommige gevallen moet u de waarde misschien naar een geheel getal converteren. Vreemd genoeg is de geretourneerde waarde van $("...").offset().top zit soms in float.
Gebruik: parseInt($("....").offset().top)

Bijvoorbeeld:

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

15
2018-02-06 15:39



Een compacte versie van de "animerende" oplossing.

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

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

Basis gebruik: $('#your_element').scrollTo();


15
2017-08-29 11:19



Als u alleen scrolt naar een invoerelement, kunt u dit gebruiken focus(). Als u bijvoorbeeld naar de eerste zichtbare invoer wilt scrollen:

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

Of de eerste zichtbare invoer in een container met klasse .error:

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

Dankzij Tricia Ball voor het wijzen van dit!


12
2018-01-28 17:00



Met deze oplossing je hebt geen plug-in nodig en dat is er geen setup vereist naast het plaatsen van het script voor je afsluiting </body> label.

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

Bij laden, als er een hash in het adres zit, scrollen we er naartoe.

En - wanneer u op een klikt a koppeling met een href hasj b.v. #top, we scrollen ernaar.


11
2017-08-02 23:09