CODEWITHSUNDEEP
javascripthtmlcssscroll
MattiaScorpio
MattiaScorpio

Reputation: 11

Scroll to a specific section, without reloading the page, using "href" in HTML

I'm trying to scroll to a specific section, in html, using href and onclick="window.location=" but it doesn't work. Can someone help me?? This is my code:

<html lang="en">
<Head>
    <title>Portfolio</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
</Head>


<body>
    <section class="section1" id="#section1"></section>

    <section class="section2" id="#section2"></section>

    <section class="section3" id="#section3"></section>

    <section class="section4" id="#section4"></section>

    <footer>
        <div class="menu-btn">
            <div class="trep"></div>
            <div href="#section2" class="chi-sono"></div>
            <div onclick="window.location='#section3';" class="progetti"></div>
            <div onclick="window.location='#section4';" class="contattami"></div>
        </div>
    </footer>
</body>
</html>```

Upvotes: 1

Views: 1176

Answers (1)

Spectric
Spectric

Reputation: 31987

The id attribute must not contain a #. Remove it:

section{
  height:500px;
  background-color:#ededed;
  margin:10px;
}
<html lang="en">
<Head>
    <title>Portfolio</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
</Head>


<body>
    <section class="section1" id="section1"></section>

    <section class="section2" id="section2"></section>

    <section class="section3" id="section3"></section>

    <section class="section4" id="section4"></section>

    <footer>
        <div class="menu-btn">
            <div class="trep"></div>
            <div href="#section2" class="chi-sono"></div>
            <div onclick="window.location='#section3';" class="progetti">Jump to section 3</div>
            <div onclick="window.location='#section4';" class="contattami">Jump to section 4</div>
        </div>
    </footer>
</body>
</html>

Upvotes: 1

Related Questions