#s1{
background-color:red;
height:100px;
}
#s2{
background-color:blue;
height:100px;
}
#s3{
background-color:orange;
height:100px;
}
#s4{
background-color:yellow;
height:100px;
}<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- icons script -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>
<body>
<div class="container">
<div class="row" id="s1">Section1</div>
<div class="row" id="s2">Section2</div>
<div class="row" id="s3">Section3</div>
<div class="row" id="s4">Section4</div>
<div>
</body>
</html>如何在这些部分中使用 css 和 javascript，使它们像具有滚动功能的单独网页一样。
示例：在我的第一次滚动期间，我想导航到第 2 部分，其中包含单独的 URL。
在我的第二次滚动中，我想导航到第 3 部分，其中包含单独的 URL。
在我的第三次滚动中，我想导航到带有单独 url 的第 4 部分。
您无法使用滚动条执行此操作。下一个最好的事情是锚链接。
当您单击这些内容时，它将滚动到特定的 iframe，因为我们将它们与 iframe ID 绑定在一起：
<a href="#F1" title="Click to go to section 1">Section 1</a>
<a href="#F2" title="Click to go to section 2">Section 2</a>
<a href="#F3" title="Click to go to section 3">Section 3</a>
<a href="#F4" title="Click to go to section 4">Section 4</a>
再往下看...
<iframe id="F1" src="URL 1"></iframe>
<iframe id="F2" src="URL 2"></iframe>
<iframe id="F3" src="URL 3"></iframe>
<iframe id="F4" src="URL 4"></iframe>
我建议您使用scrollify，这是一个很棒的插件，可以为您节省大量时间，并且您将拥有所需的一切。以下是链接 https://projects.lukehaas.me/scrollify/#home