• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Button zum runterscrollen

Jona$3006

Jona$3006

Neues Mitglied
Liebe Community,

ich habe folgendes Problem:

Ich habe einen Button auf einer Website. Wenn man den anklickt, soll automatisch weiter nach unten gescrollt werden, bis zu einem bestimmte div Container

Das habe ich bis jetzt:

Code: 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scroll Down</title>
    <style>

        .div_1 {
            margin-top: 1000px;
            background-color: brown;
            width: 100%;
            height: 500px;
            margin-bottom: 500px;
        }

    </style>
</head>
<body>
    <button onclick="scrollDownToDiv()">Scroll Down</button>
    <div class="div_1"></div>
</body>
</html>

Kann mir wer helfen? Danke im Voraus
 
Ja das klappt vielen Dank
Könnte man es vielleicht noch so machen, das es nicht direkt zum div "springt" sondern langsam runterscrollt?
 
Mit jQuery:
Javascript: 
  $( document ).ready(function() {
$(".menu-item").click(function(event) {
   event.preventDefault();
  var id = $(this).attr("href");
$('html, body').animate({ scrollTop: ($(id).offset().top)}, 'slow');
});
});
HTML: 
<a class="menu-item" href="#ziel">Scroll</a>
musst natürlich vorher jQuery einbinden!
 
Zuletzt bearbeitet:
Für eine Funktion würde ich das ohne jQuery machen. Das brauch man heute nicht mehr.
JQuery hat eine Zeit lang vieles vereinfacht , gerade für Anfänger.
Heute verzichten immer mehr auf jQuery , gerade für die eine Funktion muss man ein unnötiges großes jQuery Script einbinden was eigentlich nicht gebraucht wird.

Theoretisch geht es auch ohne Javascript und nur mit CSS
 
Zuletzt bearbeitet:
Von jQuery würde ich auch abraten, das lässt sich heutzutage durch VanillaJS ersetzen, so auch hier: scrollIntoView.
basti1012 schrieb:
Theoretisch geht es auch ohne Javascript und nur mit CSS
Zum Vergrößern anklicken....
Auch praktisch sollte es mit scroll-behavior funktionieren - nur sehe ich hier aber nur mit Firefox einen Unterschied, Vivaldi scrollt unabhängig von der Einstellung ganz normal (sollte es aber können da ja auch die Blink-Engine verwendet wird).
 
Also ich habe ein ähnliches Script für einen One Pager in Wordpress eingebunden.
In Wordpress ist jQuery standardmäßig schon inkludiert, so ganz irrelevant ist es nicht!
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben