Wie kann ich meine Seite nach unten scrollen, wenn ein Benutzer auf eine Schaltfläche klickt?

Question

Ich habe einen Button auf meiner Homepage eingefügt. Ich möchte, wenn Benutzer auf diese Schaltfläche klicken, damit die Seite zu dem entsprechenden Abschnitt herunterscrollt, auf den sich die Schaltfläche bezieht (in meinem Fall der Shop-Teil meiner Homepage). Wie kann ich Code für die Seite einfügen, um nach unten zu scrollen, wenn ein Benutzer auf eine Schaltfläche klickt?

Meine Website ist hintdrop.com

Answer 1

Wenn Sie einen Fragmentbezeichner suchen.

Fügen Sie dem Abschnitt, zu dem Sie blättern möchten, ein id-Attribut hinzu.

Beispiel: <section id="shop"> ... </section>

Dann einen Anker verwendet <a> anstelle einer Schaltfläche mit einem href Attribute.

Beispiel: <a href="#shop">Shop</a>

Einfaches Beispiel:

#shop { 
 
    margin-top: 300vh; 
 
    background-color: tomato; 
 
    height: 100vh; 
 
    position: relative; 
 
} 
 

 
#shop::after { 
 
    content: 'Shop Content'; 
 
    position: absolute; 
 
    color: white; 
 
    font-size: 3em; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
}

<a href="#shop">Shop</a> 
 

 
<section id="shop"></section>

Wenn glatte Scroll gesucht, kann scrollIntoView wie so verwendet werden:

document.querySelector('#shopBtn').addEventListener('click', function() { 
 

 
    document.querySelector('#shop').scrollIntoView({ 
 
    behavior: 'smooth' 
 
    }); 
 

 
});

#shop { 
 
    margin-top: 300vh; 
 
    background-color: tomato; 
 
    height: 100vh; 
 
    position: relative; 
 
} 
 

 
#shop::after { 
 
    content: 'Shop Content'; 
 
    position: absolute; 
 
    color: white; 
 
    font-size: 3em; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
}

<button id="shopBtn">Shop</button> 
 

 
<section id="shop"></section>

Answer 2

Sie können auch versuchen, eine ahref zu verwenden und geben Sie eine ID, wenn es klickt, wird es zu einem bestimmten Abschnitt verschoben.

Answer 3

Einfachste Antwort: Erstellen Sie eine ID in Ihrem div oder anderen Tags, dann in Ihrem Anker oder einem href-Tag, verknüpfen Sie den Namen Ihrer ID dort.

Beispiel:

<!--remember that ID links inside your html tag, should always have a hashtag (#)--> 

<a href="#thisismydiv">JUMP TO MY DIVISION</a> 

<!--your codes---> 

<div id="thisismydiv">I am div!</div>