#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部分，并使用它的单独网址
在我的第二次滚动期间，我想要使用它的单独网址导航到第3部分
在我的第3次滚动期间，我想要使用它的单独网址导航到第4部分。
答案 0 :(得分：0)
您无法使用滚动条执行此操作。下一个最好的事情是锚链接。
当您点击这些内容时，它会滚动到特定的iframe，因为我们将它们与iframe ID绑定在一起：
0x05, 0x14, // USAGE_PAGE (Alphnumeric Display)
0x09, 0x01, // USAGE (Alphanumeric Display)
0x15, 0x00, // LOGICAL_MINIMUM (0)
0xa1, 0x02, // COLLECTION (Logical)
0x09, 0x20, // USAGE (Display Attributes Report)
0xa1, 0x02, // COLLECTION (Logical)
0x09, 0x35, // USAGE (Rows)
0x09, 0x36, // USAGE (Columns)
0x09, 0x3d, // USAGE (Character Width)
0x09, 0x3e, // USAGE (Character Height)
0x85, 0x01, // REPORT_ID (1)
0x25, 0x1f, // LOGICAL_MAXIMUM (31)
0x75, 0x05, // REPORT_SIZE (5)
0x95, 0x04, // REPORT_COUNT (4)
0xb1, 0x03, // FEATURE (Cnst,Var,Abs)
0x75, 0x01, // REPORT_SIZE (1)
0x95, 0x03, // REPORT_COUNT (3)
0x25, 0x01, // LOGICAL_MAXIMUM (1)
0x09, 0x21, // USAGE (ASCII Character Set)
0x09, 0x22, // USAGE (Data Read Back)
0x09, 0x29, // USAGE (Vertical Scroll)
0xb1, 0x03, // FEATURE (Cnst,Var,Abs)
0x95, 0x03, // REPORT_COUNT (3)
0xb1, 0x03, // FEATURE (Cnst,Var,Abs)
0xc0, // END_COLLECTION
0x75, 0x08, // REPORT_SIZE (8)
0x95, 0x01, // REPORT_COUNT (1)
0x25, 0x02, // LOGICAL_MAXIMUM (2)
0x09, 0x2d, // USAGE (Display Status)
0xa1, 0x02, // COLLECTION (Logical)
0x09, 0x2e, // USAGE (Stat Not Ready)
0x09, 0x2f, // USAGE (Stat Ready)
0x09, 0x30, // USAGE (Err Not a loadable character)
0x81, 0x40, // INPUT (Data,Ary,Abs,Null)
0xc0, // END_COLLECTION
0x09, 0x32, // USAGE (Cursor Position Report)
0xa1, 0x02, // COLLECTION (Logical)
0x85, 0x02, // REPORT_ID (2)
0x75, 0x04, // REPORT_SIZE (4)
0x95, 0x01, // REPORT_COUNT (1)
0x25, 0x0f, // LOGICAL_MAXIMUM (15)
0x09, 0x34, // USAGE (Column)
0xb1, 0x22, // FEATURE (Data,Var,Abs,NPrf)
0x25, 0x01, // LOGICAL_MAXIMUM (1)
0x09, 0x33, // USAGE (Row)
0xb1, 0x22, // FEATURE (Data,Var,Abs,NPrf)
0xc0, // END_COLLECTION
0x09, 0x2b, // USAGE (Character Report)
0xa1, 0x02, // COLLECTION (Logical)
0x85, 0x03, // REPORT_ID (3)
0x75, 0x08, // REPORT_SIZE (8)
0x95, 0x04, // REPORT_COUNT (4)
0x25, 0x7e, // LOGICAL_MAXIMUM (126)
0x09, 0x2c, // USAGE (Display Data)
0xb2, 0x02, 0x01, // FEATURE (Data,Var,Abs,Buf)
0xc0, // END_COLLECTION
0x85, 0x04, // REPORT_ID (4)
0x09, 0x3b, // USAGE (Font Report)
0xa1, 0x02, // COLLECTION (Logical)
0x15, 0x00, // LOGICAL_MINIMUM (0)
0x25, 0x7e, // LOGICAL_MAXIMUM (126)
0x75, 0x08, // REPORT_SIZE (8)
0x95, 0x01, // REPORT_COUNT (1)
0x09, 0x2c, // USAGE (Display Data)
0x91, 0x02, // OUTPUT (Data,Var,Abs)
0x95, 0x05, // REPORT_COUNT (5)
0x09, 0x3c, // USAGE (Font Data)
0x92, 0x02, 0x01, // OUTPUT (Data,Var,Abs,Buf)
0xc0, // END_COLLECTION
0xc0, // END_COLLECTION
进一步向下移动......
<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>
答案 1 :(得分：0)
我建议你使用scrollify它一个很棒的插件，可以节省你很多时间，你将拥有你需要的一切。以下是链接 https://projects.lukehaas.me/scrollify/#home