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 Fragen

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

...zur Frage

Scroll Überlappen Animation?

Hallo,

Also geht mal bitte auf folgende Seite:

emyo-drinks.de

Dort wird erst ein video angezeigt, und wenn man scrollt überlappt sich das ganze, das video hab ich schon, aber wie kann sich das beim Scrollen überlappen?

...zur Frage

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?

...zur Frage

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!

...zur Frage

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

...zur Frage

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

...zur Frage

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

...zur Frage

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.

...zur Frage

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>

...zur Frage

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?

...zur Frage

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

...zur Frage

Wie lasse ich ein HTML-Objekt langsamer beim Scroll bewegen?

Ich möchte eine etwas grafisch ansprechendere Website erstellen. Dabei möchte ich ein 3D-Effekt auf verschiedene Objekte haben, d.h., dass der Vordergrund normal schnell beim Scrollen ist, das hintere Bild langsamer, usw.

außerdem würde ich gerne wissen, wie man ein Bild in HTML einfügt, sodass man kein Drag & Drop machen kann.

Danke im Voraus

...zur Frage

jquery function ausführen beim klick auf den eine oder den anderen button?

hallo, ich habe eine jquery function und möchte, dass sie beim klicken auf den eine button und beim klicken auf den anderen button ausgeführt wird.

skript:

$(document).ready(function() {
                $(".kommentarabschicken").click(function(){
                        if($(".kommentareingabe").val() != "") {

                            $.ajax({
                                type: "POST",
                                url: "kommentare.php",
                                data: "kommentareingabe=" + $(".kommentareingabe").val(),
                                cache: false,
                                success: function(html){
                                        $(".scroll").html(html);
                                        $(".kommentareingabe").val();
                                }
                                });
                        }
                        return false;
                    });
                });

jetzt wird sie ausgefürt bei klicken auf kommentarabschicken. Sie soll auch ausgeführt werden, wen man auch kommentaroeffnen klickt. (evtl. wenn die Seite geladen wird)

Vielen Dank im Vorraus!!

...zur Frage

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?

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen