使用 HTML 中的“href”滚动到特定部分，无需重新加载页面答案

【问题标题】：Scroll to a specific section, without reloading the page, using "href" in HTML使用 HTML 中的“href”滚动到特定部分，无需重新加载页面
【发布时间】：2021-08-28 00:12:52
【问题描述】：

我正在尝试使用 href 和 onclick="window.location=" 滚动到 html 中的特定部分，但它不起作用。有人能帮我吗？？这是我的代码：

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

【问题讨论】：

标签： javascript html css scroll

【解决方案1】：

id 属性不得包含#。删除它：

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>

【讨论】：