jQuery jump oder scrollen zu bestimmten position, div oder ziel auf der seite von button onclick

Question

Wenn ich auf eine schaltfläche klicken ich in der lage zu springen oder scrollen zu einem bestimmten div oder ziel auf der seite.

$('#clickMe').click(function() { 
    //jump to certain position or div or #target on the page 
}); 

Wie kann ich das tun?

Answer 1

$("html, body").scrollTop($(element).offset().top); // <-- Also integer can be used 

Answer 2

Ich würde einen Link wie eine Schaltfläche aussehen, weil auf diese Weise gibt es eine No-Js Fallback.

---

So können Sie den Sprung mit jQuery animieren. No-js Fallback ist ein normaler Sprung ohne Animation.

Original-Beispiel:

jsfiddle

$(document).ready(function() { 
 
    $(".jumper").on("click", function(e) { 
 

 
    e.preventDefault(); 
 

 
    $("body, html").animate({ 
 
     scrollTop: $($(this).attr('href')).offset().top 
 
    }, 600); 
 

 
    }); 
 
});

#long { 
 
    height: 500px; 
 
    background-color: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- Links that trigger the jumping --> 
 
<a class="jumper" href="#pliip">Pliip</a> 
 
<a class="jumper" href="#ploop">Ploop</a> 
 
<div id="long">...</div> 
 
<!-- Landing elements --> 
 
<div id="pliip">pliip</div> 
 
<div id="ploop">ploop</div>

---

Ne w Beispiel mit tatsächlichen Button-Stilen für die Links, nur um einen Punkt zu beweisen.

Alles ist im Wesentlichen das gleiche, außer dass ich die Klasse .jumper zu .button geändert habe und ich CSS-Styling hinzugefügt, um die Links wie Schaltflächen aussehen.

Button styles example