Wie kann ich mit jQuery zu einem bestimmten Ort auf der Seite blättern?

Question

Kann mit jQuery zu einer bestimmten Stelle auf der Seite geblättert werden?

Ist die Lage I blättern wollen zu müssen haben:

<a name="#123">here</a> 

Oder kann es bewegen Sie einfach auf eine bestimmte DOM-ID?

Answer 1

Ja, sogar in einfachem JavaScript ist es ziemlich einfach. Sie geben ein Element eine ID und dann können Sie das als „Lesezeichen“ verwenden:

<div id="here">here</div> 

Wenn Sie es wünschen, dort zu bewegen, wenn ein Benutzer auf einen Link klickt, können Sie einfach die erprobte und wahre Methode verwenden, :

<a href="#here">scroll to over there</a> 

es programmatisch zu tun, ist scrollIntoView()

verwenden

document.getElementById("here").scrollIntoView() 

Answer 2

Hier ist eine reine JavaScript-Version:

location.hash = '#123'; 

Es wird automatisch scrollen. Denken Sie daran, das Präfix "#" hinzuzufügen.

Answer 3

jQuery Scroll Plugin

da dies eine Frage mit jquery ich sagen markiert ist müssen, dass diese Bibliothek ein sehr schönes Plugin für smooth scrolling hat, können Sie es hier finden: http://plugins.jquery.com/scrollTo/

Auszüge aus Dokumentation:

$('div.pane').scrollTo(...);//all divs w/class pane 

oder

$.scrollTo(...);//the plugin will take care of this 

Benutzerdefinierte jQuery-Funktion für

Scrollen können Sie eine sehr leichten Ansatz verwenden durch Ihre benutzerdefinierte Scroll jquery Funktion

$.fn.scrollView = function() { 
    return this.each(function() { 
     $('html, body').animate({ 
      scrollTop: $(this).offset().top 
     }, 1000); 
    }); 
} 

definieren und verwenden Sie es mögen:

$('#your-div').scrollView(); 

Scroll zu einer Seite Koordinaten

Animieren html und body Elemente mit scrollTop oder scrollLeft

$('html, body').animate({ 
    scrollTop: 0, 
    scrollLeft: 300 
}, 1000); 

Plain Attribute JavaScript

mit window.scroll

Scrolling

window.scroll(horizontalOffset, verticalOffset); 

nur zusammenzufassen, verwenden Sie die window.location.hash mit ID

window.location.hash = '#your-page-element'; 

direkt in HTML (accesibility Erweiterungen)

<a href="#your-page-element">Jump to ID</a> 

<div id="your-page-element"> 
    will jump here 
</div> 

Answer 4

Es zu Element springen müssen keine Plugins verwenden , können Sie es wie folgt tun:

var divPosition = $('#divId').offset(); 

dann dieses verwenden Dokument auf bestimmten DOM blättern:

$('html, body').animate({scrollTop: divPosition.top}, "slow"); 

Answer 5

<div id="idVal"> 
    <!--div content goes here--> 
</div> 
... 
<script type="text/javascript"> 
    $(document).ready(function(){ 
     var divLoc = $('#idVal').offset(); 
     $('html, body').animate({scrollTop: divLoc.top}, "slow"); 
    }); 
</script> 

Dieses Beispiel zeigt auf eine bestimmte div id heißt, 'idVal' in diesem Fall zu lokalisieren. Wenn Sie nachfolgende divs/tables haben, die auf dieser Seite über Ajax geöffnet werden, können Sie eindeutige divs zuweisen und das Skript aufrufen, um zu dem bestimmten Ort für jeden Inhalt von divs zu blättern.

Hoffe, das wird nützlich sein.

Answer 6

Plain Javascript:

window.location = "#elementId" 

Answer 7

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $(".scroll-element").click(function(){ 
      $('html,body').animate({ 
       scrollTop: $('.our_companies').offset().top 
      }, 1000); 

      return false; 
     }); 
    }) 
</script> 

Answer 8

ist hier Variante @ juraj-blahunka des leichten Ansatz. Diese Funktion geht nicht davon aus, dass der Container das Dokument ist, und scrollt nur, wenn das Objekt nicht sichtbar ist. Die Animation-Warteschlange ist ebenfalls deaktiviert, um unnötiges Springen zu vermeiden.

$.fn.scrollToView = function() { 
    return $.each(this, function() { 
     if ($(this).position().top < 0 || 
      $(this).position().top + $(this).height() > $(this).parent().height()) { 
      $(this).parent().animate({ 
       scrollTop: $(this).parent().scrollTop() + $(this).position().top 
      }, { 
       duration: 300, 
       queue: false 
      }); 
     } 
    }); 
}; 

Answer 9

Versuchen Sie, diese

<div id="divRegister"></div> 

$(document).ready(function() { 
location.hash = "divRegister"; 
});