Website Automatisch Scrollen?

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

Bild zum Beitrag

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.

1 Antwort

MrAmazing2

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML, programmieren

18.09.2021, 20:34

Gib dem Element, zu dem gescrollt werden soll, eine bestimmte ID, und referenziere diese (mit Hashtag davor) im href-Attribut des <a>-Tags:

<nav>
  <a href="#about">About</a>
</nav>

<section>... Vorheriger Content ... </section>
<section>... Weiterer Content ... </section>

<section id="about"> Dein "about" Textabschnitt. </section>

Woher ich das weiß:Hobby – Programmieren ist mein Hobby & Beruf

TimeTravel3

Beitragsersteller

18.09.2021, 20:39

Hey, Danke für die Hilfe.

Ich habe aber noch eine Frage, wie kann ich die zeit beim scrollen verlangsamen?

MrAmazing2

18.09.2021, 20:43

@TimeTravel3

Mit folgendem CSS Code:

html { scroll-behavior: smooth; }

Aber falls dir das immernoch zu schnell ist musst du zu JavaScript (bzw. JQuery) greifen: https://stackoverflow.com/questions/35130603/slowly-scroll-to-a-specific-div-or-anchor-in-a-html-page

TimeTravel3

Beitragsersteller

18.09.2021, 20:47

@MrAmazing2

Danke!

Ähnliche Beiträge

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

...zum Beitrag

Header bei Website fixieren?

Hallo zusammen

Ich möchte bei meiner Website den Header (Suchfunktion, Warenkorb usw) fixieren , so dass dieser beim scrollen immer oben ersichtlich ist.

So wie bei dieser Website: http://www.gartenhaus-shop.ch/

Ich nutze das Shopsystem von Gambio. Kann mir jemand ev mit dem Code weiterhelfen.

Besten Dank!

...zum Beitrag

Manuelles scrollen deaktivieren HTML?

Ich habe ein iframe erstellt. Mein Problem ist, das es manuell gescrollt werden kann. Es soll mit Javascript gescrollt werden können, aber nicht durch ziehen des Fingers/bewegen des Mausrads.

Wie geht das?

LG Bohne47

...zum Beitrag

Automatisch Scrollen?

Hallo,

auf meiner Website hab ich 2 Icons, die durch eine Klick Funktion jeweils ein Div darunter erscheinen lassen.

Sobald ein Div erscheint oder ich die passende Klasse hinzufüge soll nun zu den passenden Div runter oder zum Seitenanfang gescrollt werden.

Wo liegt der Fehler ?...ich steh etwas aufm Schlauch.

Das Problem muss nicht unbedingt mit einer Scroll function gelöst werden =)

function klick() {
    let hauptDiv = document.getElementById('div_eins');


    if (hauptDiv.classList.contains('unsichtbar') == true) {
        hauptDiv.classList.remove('unsichtbar');
        hauptDiv.classList.add('sichtbar');
        window.scrollTo(0, 100);
    } else if (hauptDiv.classList.contains('sichtbar') == true) {
        hauptDiv.classList.remove('sichtbar');
        hauptDiv.classList.add('unsichtbar');
    }   else {
           return;
        }
    }

...zum Beitrag

Blog in HTML erstellen?

Also ich habe schon vor längerer Zeit für einen Freund von mir eine Website erstellt. Pures HTML und CSS - kein Websitebuilder. Doch jetzt sollte auch noch eine Art Blog dazukommen. Da mein Freund nicht ganz so technikaffin ist, benötigt er auch noch eine Eingabeseite wo er seine Texte erstellt, die dann automatisch zu Inhalten der Blogseite werden.

Ich muss gestehen, dass ich eine solche Applikation noch nie programmiert habe, bin aber bereit zu lernen wie es geht. Nur bräuchte ich dafür einen ersten Anhaltspunkt wie man das am Besten anlegen sollte.

Kennt von euch jemand ein Open-Source Blog Projekt wo man sich das ein bisschen anschauen kann, oder eine Tutorialserie dazu?

...zum Beitrag

css: wie mache ich so einen Unterstrich wie da?

https://themeix.com/livedemo?theme=appszone

zur class head-title finde ich nur diese Einträge aber das erstellt das nicht... : https://hastebin.com/hoyarafexo.css

wie geht dieser Strich genau ? kann man das auslesen ?

...zum Beitrag

DIV overflow: scroll; automatisch nach unten Scrollen?

Hallo,

ich habe ein Php Skript:

<?php
echo "<div class'eins'>Eins</div>"; 
echo "<div class'zwei'>Zwei</div>";


echo "<div class'output'>Hier <br/>ist <br/>der <br/>overflow: scroll;</div>";

echo "<div></div>";
?>

Den overflow: scroll; definiere ich in CSS.

Jetzt möchte ich, dass automatisch nach ganz unten gescrollt wird, wenn die Seite aufgerufen bzw. neu geladen wird.

Im Internet bin ich auf folgenden Code gestoßen:

<?php
echo '<body onLoad="letzteselement.scrollIntoView();">';

echo "<div class'eins'>Eins</div>"; 
echo "<div class'zwei'>Zwei</div>";


echo "<div class'output'>Hier <br/>ist <br/>der <br/>overflow: scroll; 
<a id="letzteselement" /> 
</div>";

echo "<div></div>";
?>

Bei Firefox funktioniert das auch einwandfrei, wenn ich allerdings einen anderen Browser benutze (z.B. Microsoft Edge) ist es, als ob der Code nicht existier -> es passiert nichts.

(Ich weiß nicht, ob es wichtig ist, aber der Inhalt meines Div wird aus einer Datenbank ausgelesen und ist relativ groß (Text))

Kent jemand noch einen anderen Code, der immer funktioniert?

...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

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

Html Sticky header funktioniert nicht?

Hallo, seit Weile arbeite ich an einer Website, für welche ich jetzt einen Header installiere. Oben ist etwas Content und danach ist eben der Header, der beim Scrollen oben am Rand bleiben soll. Das ist mein Code dazu, ich hoffe jemand kann mir helfen und danke im Vorraus.

------HTML------

<div id="header">
    <img src="bilder/Logo.png" alt="Logo Fliesen"></img>
         <div id="flexbox">
             <nav>
                 <ul class="menu">
                     <div class="flexitem" id="navFlex">
                        <li><a href="index.html">Home</a></li>
                        <li><a href="engagement.html">Unser Engagement</a></li>
                        <li><a href="contact.html">Kontakt</a></li>
                        <li><a href="about.html">Über mich</a></li>
                        <li><a href="referenzen.html">Referenzen</a></li>
                    </div>
                </ul>
            </nav>
       </div>
   <div class="social" class="flexitem"></div>
</div>

-----CSS------

#header {
    height: 80px;
    left: 0;
    right: 0;
    width: 100vw;
    border-bottom: 1px solid #DEDCD9;
    background-color: white;
    display: flex;
    overflow: hidden;
    position: sticky;
}

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}
  
  .sticky + #bsp {
    padding-top: 60px;
}

------Script-------

<script>window.onscroll = function() {stickyH()};

var navbar = document.getElementById("header");
var sticky = navbar.offsetTop;
function stickyH() {
   if (window.pageYOffset >= sticky) {
       navbar.classList.add("sticky")
        } else {
                navbar.classList.remove("sticky");
              }
            } 
</script>

...zum Beitrag

HTML Website Rechnungs Generator programmieren?

Hallo,

Ich möchte eine Website programmieren bei der man ein paar Daten eingibt und sie dann automatisch eine Rechnung im PDF Format erstellt. Wie mache ich das oder was muss ich dazu lernen?

...zum Beitrag

Wie bekomme ich bei wordpress den weißen Rand über dem Header weg?

Mal wieder eine Wordpress Frage an der ich nur verzweifle Ich habe eine Wordpress-seite erstellt (twenty eleven Theme) und habe dann das Hintergrundbild geändert, jetzt wo der weiße Hintergrund weg ist wird ein dünner weißer Strich über dem Header Bild Sichtbar. Wie bekomme ich diesen idiotischen Rand, bzw. Strich weg. Wieso ist so ein hässlicher Strich überhaupt im Theme vorgegeben. :D Es ist wirklich dringend und ich bedanke mich für jede Antwort.

Wenn ich was im Stylesheet css ändern muss dann gleich vorweg die Frage dazu:

Wo finde ich bestimmte Stellen im Stylesheet, mit dem Auge suchen geht nicht weil es zu lang ist und cmd F bringt auch nix weil dann nur die stellen gesucht werden die gerade sichtbar sind, aber nicht die stellen für die man runter scrollen muss.

Gruß

...zum Beitrag

Wie kann man mit PHP/JavaScript eine neue Website erstellen?

Hey Freunde

wie kann man mit PHP/JavaScript eine neue Website direkt im Browser erstellen? Also man gibt zum Beispiel den Inhalt und Titel an, drückt auf "Submit" und es wird automatisch eine neue Website erstellt, genau mit den Eingaben! Halt so ähnlich wie in WordPress bei einem neuen Blog Eintrag!

Vielen Dank!

--Ergänzung--

Mein Gedanke wäre jetzt gewesen, ein Template zu erstellen. Dann eine weitere Seite mit einem Input Field, deren Input dann PHP Variablen zugewiesen werden. Beim Drücken Des Buttons wird dann die Template Datei kopiert, und der Input eingesetzt!

...zum Beitrag

Wordpress Header: Text bezüglich angezeigter Seite entfernen?

Ich habe für meine Website einen Header erstellt. Aber unter diesem Header steht immer die angezeigte Seite (Startseite).

Wie mache ich das weg?

Ich würde mich über eine Antwort freuen. :D

(Theme: OceanWP)

...zum Beitrag

Was möchtest Du wissen?

Deinen Beitrag erstellen