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

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

Per Scrollrad von Anker zu Anker?

Hallo,

ich habe bei meiner Seite 3 Anker erstellt. Diese nutze ich um über Navigationsleiste direkt zu dem gewünschten Ziel zu kommen. Jetzt würde ich gerne noch hinzu fügen das man auch ohne anklicken der Icons zu dem jeweiligen Anker springen kann. Per Mausrad. Jetzt ist es noch so das man elendig lange scrollen muss um zum Anker zu kommen aber ich würde es gerne so machen das man direkt automatisch zu dem höheren Anker kommt. Weiß einer wie ich das machen kann? Hoffe ihr wisst überhaupt was ich meine :D

Danke schon mal im Voraus!

PS.: Ich weiß das es mit Javascript etc. machbar ist allerdings weiß ich nicht wie man so etwas macht.

Hier die Seite: https://traurigerdetlef.lima-city.de/

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

PC und mobile Version html?

hallo

ich habe da eine frage:

ich habe eine Website erstellt da sie auf dem Handy nicht gut aussieht habe ich noch eine mobile Version erstellt kann man irgendwie einstellen das zb. auf dem Handy automatisch die mobile Version aufgerufen wird.

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

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

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

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

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

im CSS ein sticky Element auf Bildschirmhöhe?

Ich arbeite gerade an einer Website, wobei ich mit einem CSS-Grid die Bereiche header, nav, footer und main definierte. Mein nav ist dabei auf der rechten Seite des Bildschirms und nimmt 15% der Breite ein. Es sollte sticky sein, da es nur aus 4 Bildern besteht, welche immer zu sehen sein sollten. Dies habe ich schon so. Nun ist das Problem, dass wenn ich scrolle, die Bilder nach oben scrollen, anstatt dort zu bleiben. (Das nav ist so zu sagen zu lang und danach kommt einfach nur noch die Hintergrundfarbe des nav). Wie kann ich machen, dass es eigentlich 100% der Höhe des Bildschirms einnimmt und dann so bleibt?

Seite beim Öffnen

Seite beim bisschen runter scrollen (so sollte es schlussendlich beim weiterscrollen auch sein)

Seite beim noch weiterscrollen

...zum Beitrag

CSS Hintergrundbild wird nicht angezeigt?

Ich mache grade eine Website, bei der oben im Header ein Hintergrundbild hinter dem Text stehen soll. Habe also ein div erstellt, eine Klasse gegeben und eine Höhe festgelegt. Wenn ich eine Hintergrundfarbe dort haben will, klappt es einwandfrei. Aber wenn ich ein background-image dort haben möchte, wird es im Browser einfach nicht angezeigt. Der Pfad stimmt, hab ihn schon mehrfach kontrolliert.

Wenn ich auf "untersuchen" klicke im Browser, wird auch dort im Code angezeigt, dass an der Stelle ein Hintergrundbild ist. Aber es wird einfach nicht angezeigt. Keine Ahnung, woran es liegt. Kann mir bitte jemand helfen?

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

Was möchtest Du wissen?

Deine Frage stellen