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>

2 Antworten

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, JavaScript, Webdesign

26.12.2021, 21:46

Du weist im Skript explizit an, an die Position zu scrollen, an der sich das Element mit der ID section03 befindet (bzw. seine obere Kante). Da es sich nicht unter dem Link befindet, besteht auch kein Grund, nach unten zu scrollen.

TwoCapitalRich

Fragesteller

26.12.2021, 22:19

Was müsste ich dann ändern?

regex9

26.12.2021, 23:37

@TwoCapitalRich

Positioniere das Zielelement (section03) irgendwo unter dem Link.

Stefanos680

26.12.2021, 20:33

Ersetze das scrollTop zu scrollDown (bin mir nicht sicher)

kein java das ist JavaScript

Woher ich das weiß:Hobby

TwoCapitalRich

Fragesteller

26.12.2021, 21:00

Habe ich schon versucht. Hat leider auch nicht geklappt

Stefanos680

26.12.2021, 21:11

@TwoCapitalRich

Hm dan weis ich es nicht

Ä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

Sticky navbar funktioniert nicht?

Guten Tag, ich muss für die Schule eine Webseite erstellen und wollte eine Sticky navbar einfügen. Dabei soll der untere Teil mit La Petite France, Cathédrale, rivière kleben bleiben. Kann mir jemand helfen?

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

        var navbar = document.getElementById("navbar");
        var sticky = navbar.offsetTop;

        function myFunction() {
        if (window.pageYOffset >= sticky) {
        navbar.classList.add("sticky")
    } else {
        navbar.classList.remove("sticky");
    }
    }
</script>

<header>
    <section class="hero is-medium">
        <div class="hero-head">
            <nav class="navbar">
                <div class="container">
                    <div class="navbar-brand">
                        <a class="navbar-item" href="index.html">
                            <img src="cigogne_strasbourg.png" alt="Logo">
                        </a>
                        <span class="navbar-burger" data-target="navbarMenuHeroB">
                            <span></span>
                            <span></span>
                            <span></span>
                      </span>
                    </div>
                    <div id="navbarMenuHeroB" class="navbar-menu">
                        <div class="navbar-end">
                            <a class="navbar-item is-active" href="index.html">
                                Home
                            </a>
                            <a class="navbar-item" href="details.html">
                                Y arriver
                            </a>
                            <a class="navbar-item" href="anmeldung.html">
                                Composer ses vacances
                            </a>
                            <span class="navbar-item">
                              <a class="button is-info is-inverted">
                                <!--<span class="icon">
                                  <i class="fab fas fa-fingerprint"></i>
                                </span>-->
                                <span>Einloggen</span>
                              </a>
                            </span>
                        </div>
                    </div>
                </div>
            </nav>
        </div>
        <div class="hero-body">
            <div class="tile is-ancestor">
                <div class="tile is-parent">
                    <div class="tile is-child is-4 is-align-content-end">
                        <h1 class="title is-2">Strasbourg</h1>
                        <h2 class="subtitle is-4">La P'tit Venise</h2>
                    </div>
                    <div class="tile is-child is-8">
                        <figure class="image">
                            <img width="10" src="cathedralefenetre.jpg" alt="Fenêtre"/>
                        </figure>
                    </div>
                </div>
            </div>
        </div>



<div id="navbar">
            <nav class="tabs is-boxed is-fullwidth">
                <div class="container">
                    <ul>
                        <li class="is-active">
                            <a href="javascript:void(0)">La Petite France</a>
                        </li>
                        <li>
                            <a href="javascript:void(0)">La Cathédrale Notre-Dame</a>
                        </li>
                        <li>
                            <a href="javascript:void(0)">La rivière</a>
                        </li>
                    </ul>
                </div>
            </nav>
</div>

    </section>
</header>

CSS:

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

...zur Frage

scroll animation mit javascript?

 window.onscroll = function() {scrollFunction()};
                
                function scrollFunction() {
                  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
                    document.getElementById("pic").style.marginTop = "0px";
                    document.getElementById("pic").style.marginLeft = "900px";
                    document.getElementById("pic").style.width = "100px";
                    document.getElementById("pic").style.height = "100px";
                    document.getElementById("h1").style.width = "1003px";
                    document.getElementById("h1").style.height = "60px";
                    document.getElementById("h1").style.marginTop = "0px";
                    document.getElementById("h1").style.textAlign = "center";
                  } else {
                    document.getElementById("pic").style.marginTop = "110px";
                    document.getElementById("pic").style.marginLeft = "800px";
                    document.getElementById("pic").style.width = "200px";
                    document.getElementById("pic").style.height = "200px";
                    document.getElementById("h1").style.width = "250px";
                    document.getElementById("h1").style.height = "50px";
                    document.getElementById("h1").style.marginTop = "195px";
                  }

Hi, kann mir vielleicht jemand helfen die scroll animation so zu gestalten, dass sie nicht so abrupt geschieht ?

..oder gibt es eine bessere Lösung für mein Vorhaben, bzw wie könnte man es einfacher coden ?

Sry, bin totaler Anfänger =)

...zur Frage

Java Script wird nicht ausgeführt?

hallo, und zwar wird bei mir nicht Java Script ausgeführt. Könnt ihr mir helfen woran dass liegt???

HTML:

<!DOCTYPE html>

<head>

</head>

<body>

<h1 id="title">Today's Quiz</h1>

</ol>

</div>

</div>

<h2 id="score-title">Your Score</h2>

<button type="button" id="check-answer" onclick="checkAnswer()">Check Answers</button>

</div>

<h2>Answers :</h2>

</ol>

</div>

</body>

</html>

JAVA SCRIPT:

...zur Frage

Text aus Span Element kopieren?

Moin,

ich habe ein Span Element:

<span id="test">Hello World</span>

Nun möchte ich den Text per Button in die Zwischenablage kopieren. Ich dachte an an sowas:

<button id="copy" onclick="copy()">Copy</button>
<script>
  function copy() {
    var text = document.getElementById("test");
    // . . .
  }
</script>

Wie kann ich das denn genau ausbauen? Im Internet habe ich bisher nur Möglichkeiten für Textfelter o.Ä. gefunden.

MfG

...zur Frage

HTML Label verschieben?

Möchte gerne das Label im untenstehenden HTML Code verschieben. Hab es mit margin im Css versucht weis aber nicht ganz genau wie es geht.

<!DOCTYPE html>

<html>

<head

<title>Probe Seite</title>

</head>

<body>

<h1> Textfelder erstellen </h1>

<label for "vname"> Vorname:

<button type="button" id="button"> auslesen </button>

</label for "vname">

</body>

</html>

...zur Frage

JQuery Bei Scrollen Datensätze nachladen

Hallol, ich möchte gerne Datensätze in einem DIV mit overflow: auto und einer festen Höhe nachladen über AJAX. Bisher ist es mit dem nachfolgenden Code so, dass nur nachgeladen wird wenn man auf der Seite nach unten scrollt.

Wie muss man den Code verändern, dass wenn man in dem DIV runterscrollt, die Datensätzte geladen werden?

    $(document).ready(function() {
    start = 0;
    count = 5;
    for (var i = 0; i < 1; i++){
        loadcontent(); 
    }
});
 
function loadcontent() {
    $("div.loader").show();    
     
    $.ajax({
        type: 'get',
        url: '/includes/ajax.php',
        async: false,
        data: { start : start, count : count },
        success: function (html){
            if(html){
                $('.container').append(html);
                start = start + 5;
            }else{
                $('.end').html('<p>Keine weiteren Posts!</p>');
            }
        }
         
    }) 
 
    $("div.loader").fadeOut('normal');     
}
 
$(window).scroll(function(){
    if ($(window).scrollTop() == $(document).height() - $(window).height()){       
            loadcontent();         
    }
});

Vielen Dank.

...zur Frage

Wie kann ich den HTML-Button mit CSS einfärben?

Hey, ich habe folgenden HTML-Code, der einen Button erstellt und möchte nun dem Button noch die Farbe #3BB54A geben.

<a href="https://nebelbusiness.de/" class="elementor-button-link elementor-button elementor-size-md elementor-animation-grow" role="button">
  <span class="elementor-button-content-wrapper">
    <span class="elementor-button-text">Schreib mir jetzt auf WhatApps!</span>
  </span>
</a>

Es soll nur den einen Button betreffen. Es sind mehrere auf der Seite vorhanden.

Vielen lieben Dank für deine Hilfe!

...zur Frage

Wie bekomme ich es hin, dass der alert bei javascript auf der Website angezeigt wird und nicht in einem extra Fenster?

Ich habe es schon mit document.write und document.get versucht. Die Aufgabenstellung lautet wie folgt:

"Erstellen Sie eine html Seite, die einen Button enthält. Klickt man auf den Button, wird eine Java Script Funktion aufgerufen, die einen beliebigen Text als alert auf der Seite ausgibt. "

Ich habe bisher folgendes:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>Test</title>
   </head>
   <body>
      <form name="button">
      <input type=button value="Alert" onclick="Box()">
      </form>
      <script language="JavaScript">
         function Box() {alert("Alarm!!")};
      </script>
   </body>
</html>

...zur Frage

Ist es möglich die Scroll-Position zu verändern in HTML/CSS?

Ich habe einen festen Header, welcher 7% der Seite beansprucht. Wenn ich jetzt auf einen Anker klicke, der zu einer Section führt (also z.B '#home') dann Scrollt der Browser immer so weit, bis die Section ganz oben auf der Seite ist, also unter dem Header. Die Scroll-Position müsste also um 7% verschoben sein. Ist das ohne JavaScript möglich?

...zur Frage

Zwei funktionen auf ein button packen?

Wie kann ich zwei funktionen auf einen Button packen? Also ich will das bei jedem click auf meinen button

1. immer plus 1 addiert wird: onclick="pluszahl()"

2. das ein Sound abgespielt wird: onclick="play()"

Leider konnte ich nur den counter machen und frage mich jetzt wie ich den sound auch aktivieren kann

HTML:

    <span class="center">Bam?</span>
    <div onclick="custom()" class="btn-container">
        <button onclick="pluszahl()"; twoclick="play()"    class="button1">
            Bam
        </button>
    </div>

    <div id="resultArea">0</div>

JavaScript:

function play() {
  var audio = new Audio('bam.mp3');
  audio.play();
}

function pluszahl() {
  document.getElementById("resultArea").innerHTML = parseInt(document.getElementById("resultArea").innerHTML)+1;
  }

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

HTML input in JavaScript-Variable?

Wenn ich in HTML ein form ausfülle und abschicke wie bekomme ich dann das eingegeben im Input in eine JavaScript Variable. Habe provisorisch mal das hier gemacht und komme nicht weiter. Danke für eure Hilfe :)

<!DOCTYPE html>

<html>

<head>

<title>Input to Variable</title>

var input = "Wie bekomme ich den eingegebenen input hier hin?"

</script>

</head>

<body>

<button>Submit</button>

</body>

</html>

...zur Frage

Warum funktioniert dieser code nicht?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Beta</title>
    <script>
        const bodyElement = document.querySelector("body");

        function setColorBlue() {
            bodyElement.background-color = "blue";
        };

        function setColorRed() {
            bodyElement.background-color = "red";
        };

        function setColorGreen() {
            bodyElement.background-color = "green";
        }
    </script>
</head>
<body>
    <div class="color-picker">
        <button onclick="setColorBlue()">Blue</button>
        <button onclick="setColorRed()">Red</button>
        <button onclick="setColorGreen()">Green</button>

    </div>
</body>
</html>

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen