Scrollen mit einem Click // WebProgrammierung

Hallo , ich bin dabei ein WebSite zu schreiben und mit interessiert wie ich Scroll befehl schreiben soll, wenn es auf dem Button gedrückt wird dass ees automatisch nach unten scrollt .? danke

3 Antworten

happyfish2

21.03.2015, 16:17

Geht z. B. mit jQuery, siehe hier: http://api.jquery.com/scroll/

TideKit

22.03.2015, 23:54

Ja. lass mal jQuery (10.346 zeilen Code) für etwas verwenden was in 1 Zeile normalen javascript gemacht ist. Du hast anscheinend keine Ahnung von javascript und denkst ohne jQuery könnte man keine Websites mehr machen -.-

TideKit

22.03.2015, 23:52

happyfish2 hat dir jQuery angeboten. ER möchte dir deine arme kleine Seite mit jQuery kaputt machen, glaube ich. Um es nochmal für den lieben happyfish zu sagen:) Man bindet keine 10.346 Zeillige Bibliothek ein, wenn normales Javascript in 1(!) Zeile geschrieben wäre. Leider scheinen einige "Webentwickler" gar keine Ahnung von javascript und seinen eigentlichen Funktionen zu haben sondern nur noch blind auf jQuery zu setzten. Das Problem mit dem Scrollen lässt sich tatsächlich(Was ein wunder?) auch in normalen JS ohne jQuery lösen. Ganz einfach:

var scrollPoX = 0; var scrollPosY = 600; scrollTo(scrollPosX, scrollPosY);

Mein Beispiel scrollt in der Breite auf 0 und in der Höhe auf 600px.

Mit einem Button zu verbinden wäre das über eine einfache Funktion.

<button onclick="var scrollPoX = 0; var scrollPosY = 600; scrollTo(scrollPosX, scrollPosY);">Scrollen!</button>

(Natürlich musst du überhaupt erst mal genug Seiteninhalt haben damit er an die Pixelposition 600 scrollen kann)

astjanselimaj

23.02.2019, 16:08

Füge an der Stelle wo hingescrollt werden soll, einen div-Container mit dem Namen 'scrollpoint' hinzu. Wenn du einen Link (<a>-Tag) als Button verwendest, füge ihn so ein: <a href='#scrollpoint'>

Wenn du ein Button (<button>-Tag) als Button verwendest, füge ihn so ein: <button onclick='window.location.href("#scrollpoint");'>

Hoffe ich konnte helfen

Ähnliche Beiträge

HTML/JavaScript: Wieso scrollt er nach oben?

Hey,

ich wollte einen Scrolldown-Button machen und er scrollt nach oben. Wieso macht er das?

</section>
<section id="section03" class="demo">
  <h1>Scroll Down Button</h1>
  <a href="#section03"><span></span>Scroll</a>
</section>
<script>
  $(function() {
    $('a[href*=#]').on('click', function(e) {
      e.preventDefault();
      $('html, body').animate({
        scrollTop: $($(this).attr('href')).offset().top
      }, 500, 'linear');
    });
  });
</script>

...zum Beitrag

Warum wird der Button click erst am Ende ausgeführt?

Ich will einen kleinen Bot schreiben, der Infos von einer bestimmten Website ausließt und dann dementsprechend Entscheidungen triff.

Um an die Informationen zu kommen, die ich haben will, muss erst ein Button gedrückt werden. Also hab ich mir das entsprechende Element raus gesucht und ein .click() hinten angehängt und damit waren die Infos auslesbar. Wenn ich diesen Befehl aber in ein "längeres" Script einbaue wir der click erst am Ende vom Programm ausgeführt. Zumindest ändert sich auf der Website erst am Ende vom Programm etwas. Was muss ich tun damit der click auch wirklich direkt ausgeführt wird?

...zum Beitrag

HTML: Scroll-to-top-Button geht nicht?

Ich habe gerade einen Scroll-to-top-Button in meine HTML-Webseite eingefügt. Von der Grafik her funktioniert alles, aber die Funktionalität ist nicht so der Hammer. Also er scrollt nicht hoch, wenn man ihn drückt.

In dem Tutorial (siehe unten) wird das Ganze mit JS gemacht. Also das hier ist der Teil aus JS, der dafür sorgt, dass die Seite nach oben scrollt, wenn man ihn drückt:

<script>
  const btnScrollToTop = document.querySelector("#btnScrollToTop")
  btnScrollToTop.addEventListener("click", function() {
    windows.scrollTo(0, 0);
  });
</script>

Muss man JS im head mit einem <link> einbinden, sowie man das mit .css macht?

P.S.: Das ist das erste Mal, dass ich JS benutze.

https://www.youtube.com/watch?v=FK5DEa1Hvco

...zum Beitrag

Website bilder laden durch scrollen?

Hi,

Ich habe am Ende meiner Website eine Bildersammlung.

Mitlerweile ist die ganz schön groß geworden.

Ich würde die gerne erst laden wenn der User da hin scrollt und dann auch nicht alle auf einmal laden sondern nur die die er sehen kann.

Danke!

...zum Beitrag

FEHLERSUCHE bei einem nicht mitscrollenden "Nach-Oben" Button?

Mehrere Stunden hat es mich heute schon beschäftigt, ich komme und komme nicht darauf...

Es geht mir um den seitlichen (rechts) "skip-to-top" Button. Exakt alles habe ich genauso wie in diesem Pen Beispiel ( Link: https://codepen.io/jackherizsmith/pen/oNxVWrK ) gemacht.

Aber bei mir scrollt der Nach-Oben Button nicht mit wie in dem Pen Beispiel :

Meine Demo-Seite: http://misanthrop.bplaced.net/test/open-public/Testseite-V11b1__26-06-24.html (aktualisiert)

Allerdings habe ich mein position: relative nicht main mitgegeben sondern der id "skiptop". Mein Dev-Tool zeigt mir an, das jeweils relative und absolute richtig erkannt wird und es wird mir auch so gezeigt.

Nur halt die Klasse "scroll-top_link" scrollt nicht in dem Bereich hoch und runter wie es soll.

Was mache ich da falsch. Könnt ihr mir bei der Fehlersuche helfen?

Vieles habe ich ausprobiert, auch meinem main habe ich position relative gegeben, aber auch anderen Elementen setzte ich position relative allerdings ohne Effekt.

Das Ding ist allerdings das dieser seitliche Bereich ein eigenes grit-Element ist. Sprich:

.main-content-wrapper {
    display: grid;
    grid:     "main-head main-head" auto
            "navigations navigations" auto
            "main-content main-content" 1fr
            "main-footer main-footer" auto
          / minmax(0, auto) [main-nav-start] 5em [main-nav-end];
    }


#navigations {
    grid-area: navigations;    
    grid-column-end: main-nav;
}

#main-nav {
    grid-area: navigations / main-nav;
    position: relative;
    outline: thin solid red;
    margin: 0;
    padding: 0;
    z-index: 100;
}

Wo ich letztendlich das Hauptmenü anzeigen lasse, da habe ich noch keinen richtigen Plan.

Eventuell in der Zeile: #navigations und dann seitlich rechts.

Nicht zu verwechseln mit Seiten-Inhalt, das ist ein Seiten internes Sprungmenü zu einem bestimmten nach Datum geordneten Artikel. Bisher habe ich noch keine bessere Bezeichnung dafür gefunden. Irgendeine Idee dafür?

Zurück zum Hauptmenü, oder ich packe das Hauptmenü seitlich zum Nach-Oben Button, mache es ebenfalls sticky.

Was dann allerdings bei einem schmalen Browserfenster passiert?... Da habe ich eigentlich vor das Hauptmenü (oberhalb vom "Seiten-inhalt" Link) ohne Button (offen) untereinander anzuzeigen.

Sag mal bitte, da mir die Praxis fehlt, wie würdest Du es lösen?

Zurück zur eigentlichen Frage:

WICHTIG ist mir nun, warum der SCROLL-TOP Button nicht nach oben und unten mitscrollt wie er es eigentlich sollte.

Muss ich da was an der html-Struktur ändern. Ein zusätzliches div?

Ich habe da heute lange daran gesessen...

...zum Beitrag

CSS/JS - automatisch hoch scrollen nach x Sekunden?

Hallo,

ist es möglich (und wie?) das wenn ein User ein DIV-Container runter scrollt, dass nach einer bestimmten Zeit automatisch wieder hochgescrollt wird damit der nächste User von oben anfängt?

Danke

...zum Beitrag

CSS: Wie kann ich einstellen dass wenn ich mit dem Mausrad Scrolle dass es eine Seite herunter geht?

Hallo Leute

Ich möchte dass auf meiner Website, wenn man scrollt dass es quasi eine ganze Seite herunter geht. Ich habe jetzt kein Beispiel, auf welcher Seite es so aussieht, aber wenn man auf http://www.apple.com/ geht, sieht man ja eine Slideshow, ich möchte eigentlich dassselbe machen, halt einfach vertikal und mit Scrollen. Habt ihr eine Idee. Am liebsten nur mit CSS.

Danke für die Hilfe

Ranixi

...zum Beitrag

Chrome extension, die den Browser automatisiert steuern kann?

Kann mir jemand eine gute Seite empfehlen, wo man lernen kann, wie man eine Chrome Erweiterung erstellt, die auf websiten Buttons klickt, Inputs ausfüllt, scrollt etc. ..? Die Extension sollte mit Html, CSS, Javascript geschrieben sein. Außerdem sollte die Aktion erst ausgeführt werden wenn man in der Extension einen Button drückt. Kann mir da jemand eine gute Videoreihe oder Website empfehlen?

...zum Beitrag

Wie kann ich einen HTML button direkt neben einem <p> Element plazieren?

(die <form> und der <p> werden auf der website ja immer automatisch untereinader angezeigt

...zum Beitrag

Scroll Schnelligkeit einzelner Elemente verändern (Website)?

Ich habe ein ELement (zB ein Div) und möchte dass dieses div langsamer nach oben scrollt als andere Elemente auf der Seite - Wir nehmen zB an ich habe 4 divs: Jedes Div soll in einer anderen Geschwindigkeit nach oben scrollen.... Wie könnte man das mit JS/CSS umsetzen? Am besten mit Erklärung - im Internet finde ich leider nur fertigen Code den ich nicht einfach so einsetzen will ohne ihn zu verstehen :)

...zum Beitrag

Html Passwort?

Guten Tag ich bin dabei eine seite zu programmieren auf welcher man einen key eingeben muss und dann weiter geleitet wird jedoch stoße ich hirbei auf probleme und zwar ist das passwort schon automatisch eingegeben und man kann eingeben was man will man wird trotzdem weitergeleitet wie kann ich das beheben hier der code :

<!DOCTYPE html>
<html>
<body>
<h1>Key</h1>
<form action="/action_page.php">
 <label for="key">Key:</label>
 <input type="password" id="key" name="key" value="1234"><br><br>
 <input type="submit" value="Submit">
</form>
<p>Click the "Submit" button and the form-data will be sent to a page on the 
server called "hier kommt noch ein link".</p>
</body>
</html>

...zum Beitrag

Wwordpress runter zu bestimmten Bereich?

Wenn ich einen Button im Header gehe, möchte ich das die Website automatisch dahin scrollt.

Wie geht so etwas?

...zum Beitrag

Website Automatisch Scrollen?

hey, ich habe eine website erstellt, in der ich mich vorstelle.

Ich habe einen header erstellt, und mehrere text abschnitte mit den themen im header gemacht. jetzt möchte ich, das wenn man zB About drückt, dass automatisch zu dem textabschnitt gescrollt wird.

...zum Beitrag

HTML CSS - Bild beim Scrollen verschwinden lassen?

Hey,

auf der Website " https://instagrambusiness.funnelcockpit.com/anleitung-sale-landing-page-2/ "verschwindet oben das Bild mit dem Diamand, desto weiter man nach unten scrollt. Allerdings nicht auf die normale Art, sondern mit irgendeinem Effekt. Das heißt das schwarze Bild darunter setzt sich auf das "Diamand-Bild".

Wie geht das?

Liebe Grüße

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen