滚动到特定部分,而无需重新加载页面,使用 HTML 中的"href"



我想滚动到一个特定的部分,在html中,使用href和onclick="window.location="但这行不通。有人能帮帮我吗?这是我的代码:

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

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>

最新更新