• 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
 

Jona$3006

Neues Mitglied
Ja das klappt vielen Dank
Könnte man es vielleicht noch so machen, das es nicht direkt zum div "springt" sondern langsam runterscrollt?
 

Oliver77

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

basti1012

Senior HTML'ler
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:

tk1234

Aktives Mitglied
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).
 

Oliver77

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

Sempervivum

Senior HTML'ler
jQuery wird noch sehr verbreitet eingesetzt aber das hat historische Gründe und ist kein Grund, es weiter zu empfehlen. Bei dem Fragesteller habe ich den Eindruck, dass er ganz am Anfang mit der Webentwicklung ist und da ist es wenig angebracht, sich in etwas einzuarbeiten, was mehr oder weniger veraltet ist.
 
Werbung:

Neueste Beiträge

Oben