在ScrollSpy中平滑滚动
对不起，我的英语。
我正在创建一个网站，并且希望对内部链接实施平滑滚动。我尝试了许多不同的代码html {scroll-behavior: smooth;}和不同的JavaScript代码。
水平导航栏可与以下代码配合使用：
但是垂直导航栏（用作
这是我的代码：
<!doctype html>
<html lang="pt-bt">
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<title> Curso HTML Bootstrap </title>
<!--Requeried Meta TAGS!-->
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="node_modules/bootstrap/compiler/bootstrap.css">
<link rel="stylesheet" href="node_modules/bootstrap/compiler/style.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-gradient-primary">
<div class="container">
<a class="navbar-brand h1 mb-0" href="#">Curso</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSite">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSite">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#item3">Inicio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Perfil</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Serviços</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Depoimentos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contatos</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown"
id="navDrop">Redes Sociais</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Facebook</a>
<a class="dropdown-item" href="#">Instagram</a>
<a class="dropdown-item" href="#">Youtube</a>
<a class="dropdown-item" href="#">Linkedin</a>
</div>
</li>
</ul>
<form class="form-inline">
<input class="form-control ml-4" type="search"
placeholder="Pesquisar...">
<button class="btn btn-dark" type="submit">Ok</button>
</form>
</div>
</div>
</nav>
<div id="carouselSite" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselSite" data-slide-to="0" class="active"></li>
<li data-target="#carouselSite" data-slide-to="1"></li>
<li data-target="#carouselSite" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/idaho239691_1920.jpg" class="d-block w-100">
<div class="carousel-caption d-none d-md-block">
<h1>Lorem ipsum dolor sit amet</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam commodo dolor a ligula fringilla laoreet. Sed sagittis
eleifend sem, eget pretium est aliquam sit amet. Vivamus at
consectetur felis. Proin eu accumsan lectus. Etiam id ante at ex
tempor iaculis.</p>
</div>
</div>
<div class="carousel-item">
<img src="img/img (35).jpg" class="d-block w-100">
<div class="carousel-caption d-none d-md-block">
<h1>Etiam ac elit et eros consequat luctus.</h1>
<p class="lead">Etiam ac elit et eros consequat luctus. Phasellus eu
sapien molestie, pharetra odio ac, mollis turpis. Mauris aliquam arcu
in orci accumsan, et semper mi lacinia.</p>
</div>
</div>
<div class="carousel-item">
<img src="img/maxresdefault.jpg" class="d-block w-100">
<div class="carousel-caption d-none d-md-block">
<h1>Phasellus tempus eget enim vel pharetra.</h1>
<p class="lead">Phasellus tempus eget enim vel pharetra. Aliquam erat
volutpat. Mauris vehicula lectus quis tellus semper pretium vitae a
purus. Ut vulputate quam eget tincidunt efficitur.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselSite" role="button"
data-slide="prev">
<span class="carousel-control-prev-icon"></span>
<span class="sr-only">Anterior</span>
</a>
<a class="carousel-control-next" href="#carouselSite" role="button"
data-slide="next">
<span class="carousel-control-next-icon"></span>
<span class="sr-only">Avançar</span>
</a>
</div>
<div class="container">
<div class="row">
<div class="col-12 text-center my-5">
<h1 class="display-3">Maecenas orci risus</h1>
<p>Maecenas orci risus, consequat eu luctus vehicula, vulputate sit amet
arcu.</p>
</div>
</div>
<div class="row mb-5">
<div class="col-sm-5 col-md-3">
<nav id="navbarVertical" class="navbar navbar-light bg-light">
<nav class="nav nav-pills flex-column">
<a class="nav-link" href="#item1">Lorem ipsum</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ml-3" href="#item1-1">Curabitur bibendum</a>
<a class="nav-link ml-3" href="#item1-2">Phasellus posuere</a>
</nav>
<a class="nav-link my-2" href="#item2">Sed feugiat</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ml-3" href="#item2-1">Aliquam ac</a>
<a class="nav-link ml-3" href="#item2-2">Maecenas eleifend</a>
</nav>
<a class="nav-link my-2" href="#item3">Nunc vitae</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ml-3" href="#item3-1">Duis nec orci</a>
<a class="nav-link ml-3" href="#item3-2">Ut imperdiet</a>
</nav>
</nav>
</nav>
</div>
<div class="col-sm-7 col-md-9">
<div data-spy="scroll" data-target="#navbarVertical" data-offset="0"
class="scrollspySite">
<h4 id="item1">Lorem ipsum</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam
venenatis tortor fermentum ullamcorper laoreet. Fusce fermentum nibh
sed lacus euismod tincidunt. Aliquam lorem turpis, condimentum id
augue ut, aliquet pretium eros. In id neque mi. Fusce semper magna
eget pharetra porta. Donec auctor scelerisque nisi, eleifend rhoncus
lectus suscipit quis. Etiam scelerisque feugiat varius. Maecenas sed
malesuada mi. Pellentesque sit amet dolor aliquet, imperdiet odio
vitae, suscipit dolor. Aliquam ullamcorper eros ac justo volutpat, nec
lacinia metus tempus. Morbi at odio vestibulum, scelerisque mauris in,
laoreet massa. Praesent consectetur eros quis dapibus pharetra.</p>
<h5 id="item1-1">Teste</h5>
<p>Vestibulum mollis lacus quis dolor sodales, sit amet vestibulum
tellus aliquet. Fusce ultrices quis mauris non placerat. Maecenas
dolor velit, tincidunt rutrum sapien vitae, cursus vestibulum dui.
Quisque in dignissim arcu, vitae porttitor velit. Mauris tempus
ullamcorper orci ut dictum. Curabitur commodo dolor ac dui accumsan,
luctus tincidunt nisl pulvinar. Donec est ipsum, lobortis id lorem sit
amet, vulputate blandit nisl. Nunc viverra pulvinar neque. Orci varius
natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Curabitur sed sem ac velit lobortis porta. Proin blandit turpis
diam, non consectetur lectus iaculis molestie. Fusce venenatis, erat a
venenatis vehicula, libero sapien molestie dui, ac aliquet risus nisi
at orci.</p>iquet. Fusce ultrices quis mauris non placerat. Maecenas
dolor velit, tincidunt rutrum sapien vitae, cursus vestibulum dui.
Quisque in dignissim arcu, vitae porttitor velit. Mauris tempus
ullamcorper orci ut dictum. Curabitur commodo dolor ac dui accumsan,
luctus tincidunt nisl pulvinar. Donec est ipsum, lobortis id lorem sit
amet, vulputate blandit nisl. Nunc viverra pulvinar neque. Orci varius
natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Curabitur sed sem ac velit lobortis porta. Proin blandit turpis
diam, non consectetur lectus iaculis molestie. Fusce venenatis, erat a
venenatis vehicula, libero sapien molestie dui, ac aliquet risus nisi at
orci.</p>
<h5 id="item1-2">Aliquam at</h5>
<p>Aliquam at enim tincidunt, fringilla purus at, lacinia ipsum. Aenean
sed convallis elit, eu hendrerit urna. Praesent hendrerit dui non
vulputate lobortis. Praesent tempor tellus in ultricies gravida.
Nullam bibendum bibendum justo eget pulvinar. Suspendisse gravida
tristique tristique. Nulla tincidunt nibh et luctus mollis. Praesent
nunc ipsum, porttitor nec quam non, eleifend bibendum elit. Vestibulum
dui dui, suscipit sit amet consequat ut, sagittis eu libero. Duis
tempus luctus lobortis. Maecenas consectetur finibus porta.</p>
<h4 id="item2">Sed varius</h4>
<p>Sed varius augue in velit lobortis ultricies. Donec auctor vitae
justo quis laoreet. Sed ac tellus metus. Nunc non mauris est. Interdum
et malesuada fames ac ante ipsum primis in faucibus. Cras turpis
justo, lobortis et cursus in, mattis at est. Sed lorem enim, dignissim
at sem vitae, mattis porttitor turpis. Nunc ac eleifend orci, et
tincidunt sapien. Pellentesque habitant morbi tristique senectus et
netus et malesuada fames ac turpis egestas. Curabitur placerat varius
aliquet. Nullam sit amet velit laoreet, accumsan purus at, molestie
est. Aenean sodales turpis vel egestas dapibus. Mauris fringilla at
eros quis blandit. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos himenaeos. Sed convallis nisi fermentum
varius tincidunt.</p>
<h5 id="item2-1">Ut scelerisque</h5>
<p>Ut scelerisque neque sed nunc porttitor, ut egestas metus accumsan.
Proin quis odio nec ex fringilla cursus. Quisque faucibus dictum
risus, vitae porttitor felis varius ac. Etiam sit amet gravida felis,
sed porta velit. Etiam rhoncus egestas maximus. Quisque mollis, elit
eu ultricies luctus, velit mi congue nisi, iaculis congue massa risus
vitae lectus. In hac habitasse platea dictumst.</p>
<h5 id="item2-2">Lorem ipsum</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam
venenatis tortor fermentum ullamcorper laoreet. Fusce fermentum nibh
sed lacus euismod tincidunt. Aliquam lorem turpis, condimentum id
augue ut, aliquet pretium eros. In id neque mi. Fusce semper magna
eget pharetra porta. Donec auctor scelerisque nisi, eleifend rhoncus
lectus suscipit quis. Etiam scelerisque feugiat varius. Maecenas sed
malesuada mi. Pellentesque sit amet dolor aliquet, imperdiet odio
vitae, suscipit dolor. Aliquam ullamcorper eros ac justo volutpat, nec
lacinia metus tempus. Morbi at odio vestibulum, scelerisque mauris in,
laoreet massa. Praesent consectetur eros quis dapibus pharetra.</p>
<h4 id="item3">Vestibulum mollis</h4>
<p>Vestibulum mollis lacus quis dolor sodales, sit amet vestibulum
tellus aliquet. Fusce ultrices quis mauris non placerat. Maecenas
dolor velit, tincidunt rutrum sapien vitae, cursus vestibulum dui.
Quisque in dignissim arcu, vitae porttitor velit. Mauris tempus
ullamcorper orci ut dictum. Curabitur commodo dolor ac dui accumsan,
luctus tincidunt nisl pulvinar. Donec est ipsum, lobortis id lorem sit
amet, vulputate blandit nisl. Nunc viverra pulvinar neque. Orci varius
natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Curabitur sed sem ac velit lobortis porta. Proin blandit turpis
diam, non consectetur lectus iaculis molestie. Fusce venenatis, erat a
venenatis vehicula, libero sapien molestie dui, ac aliquet risus nisi
at orci.estibulum mollis lacus quis dolor sodales, sit amet vestibulum
tellus aliquet. Fusce ultrices quis mauris non placerat. Maecenas
dolor velit, tincidunt rutrum sapien vitae, cursus vestibulum dui.
Quisque in dignissim arcu, vitae porttitor velit. Mauris tempus
ullamcorper orci ut dictum. Curabitur commodo dolor ac dui accumsan,
luctus tincidunt nisl pulvinar. Donec est ipsum, lobortis id lorem sit
amet, vulputate blandit nisl. Nunc viverra pulvinar neque. Orci varius
natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Curabitur sed sem ac velit lobortis porta. Proin blandit turpis
diam, non consectetur lectus iaculis molestie. Fusce venenatis, erat a
venenatis vehicula, libero sapien molestie dui, ac aliquet risus nisi
at orci.</p>
<h5 id="item3-1">Aliquam at</h5>
<p> raesent tempor tellus in ultricies gravida. Nullam bibendum bibendum
justo eget pulvinar. Su Praesent tempor tellus in ultricies gravida.
Nullam bibendum bibendum justo eget pulvinar. Suspendisse gravida
tristique tristique. Nulla tincidunt nibh et luctus mollis. Praesent
nunc ipsum, porttitor nec quam non, eleifend bibendum elit. Vestibulum
dui dui, suscipit sit amet consequat ut, sagittis eu libero. Duis
tempus luctus lobortis. Maecenas consectetur finibus porta. liquam at
enim tincidunt, fringilla purus at, lacinia ipsum. Aenean sed
convallis elit, eu hendrerit urna. Praesent hendrerit dui non
vulputate lobortis. Praesent tempor tellus in ultricies gravida.
Nullam bibendum bibendum justo eget pulvinar. Suspendisse gravida
tristique tristique. Nulla tincidunt nibh et luctus mollis. Praesent
nunc ipsum, porttitor nec quam non, eleifend bibendum elit. Vestibulum
dui dui, suscipit sit amet consequat ut, sagittis eu libero. Duis
tempus luctus lobortis. Maecenas consectetur finibus porta</p>
<h5 id="item3-2">Sed varius</h5>
<p>Sed varius augue in velit lobortis ultricies. Donec auctor vitae
justo quis laoreet. Sed ac tellus metus. Nunc non mauris est. Interdum
et malesuada fames ac ante ipsum primis in faucibus. Cras turpis
justo, lobortis et cursus in, mattis at est. Sed lorem enim, dignissim
at sem vitae, mattis porttitor turpis. Nunc ac eleifend orci, et
tincidunt sapien. Pellentesque habitant morbi tristique senectus et
netus et malesuada fames ac turpis egestas. Curabitur placerat varius
aliquet. Nullam sit amet velit laoreet, accumsan purus at, molestie
est. Aenean sodales turpis vel egestas dapibus. Mauris fringilla at
eros quis blandit. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos himenaeos. Sed convallis nisi fermentum
varius tincidunt.</p>
</div>
</div>
</div>
</div>
<!-- jQuery first, then popper.js, then Bootstrap JS -->
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
<script src="js/app.js"></script>
</body>
</html>
我的styles.scss是：
.scrollspySite{
position: relative;
overflow: auto;
height: 400px;
}
html {
scroll-behavior: smooth;
}
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？