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

Button zum runterscrollen

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
 
Werbung:
Ja das klappt vielen Dank
Könnte man es vielleicht noch so machen, das es nicht direkt zum div "springt" sondern langsam runterscrollt?
 
Werbung:
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.
Theoretisch geht es auch ohne Javascript und nur mit CSS
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).
 
Werbung:
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!
 
Zurück
Oben