我正在为一个小型协会开发一个网站。它是使用 bootstrap 4 构建的，我有一个链接到多个 flex-container 的 navbar。我希望这些链接能够顺畅地滚动到这些元素。
我正在使用以下 jQuery 来实现此目的:
// Scroll to id from nav items
$(".navbar a").click(function () {
$("body,html").animate({
scrollTop: $("#" + $(this).data('value')).offset().top - $('.navbar').height() - 10
}, 1000)
});
这应该滚动到对应于 flex-container 顶部的位置 - navbar - 10 的缓冲区。
我在同一个 .js 文件中也有 flowing，它使用 ScrollReveal package在用户滚动时淡入文本/图像:
// Reveal text on scroll through
window.sr = ScrollReveal({ reset: true });
sr.reveal('.reveal', { opacity: 0.1, duration:600 });
通常单击 nav-link 最初会过度滚动，但会在第二次单击时重新滚动到正确的位置。我发现如果删除 ScrollReveal 调用，滚动会按预期工作。
上面的代码片段有什么问题吗？
// Get height of screen for header
$(document).ready(function () {
$('.header').height($(window).height());
});
// Scroll to id from nav items
$(".navbar a").click(function () {
$("body,html").animate({
scrollTop: $("#" + $(this).data('value')).offset().top - $('.navbar').height() - 10
}, 1000)
});
// Header button -> scroll down
$(".header button").click(function () {
$("body,html").animate({
scrollTop: $("#" + $(this).data('value')).offset().top - $('.navbar').height() - 10
}, 1000)
});
// This is causing the problem //
// Reveal text on scroll through
window.sr = ScrollReveal({ reset: true });
sr.reveal('.reveal', { opacity: 0.1, duration:600 });@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 400;
src: local('Raleway'), local('Raleway-Regular'), url(https://fonts.gstatic.com/s/raleway/v12/1Ptug8zYS_SKggPNyC0ISg.ttf) format('truetype');
}
html,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a {
font-family: "Raleway", serif;
}
p {
font-size: 1rem;
}
html {
height: 100% !important;
}
.flex-container {
padding-left: .8em !important;
padding-right: .8em !important;
}
/* Nav bar */
.navbar {
background-color: rgba(26, 62, 85, 0.88);
}
.nav-link,
.navbar-brand {
color: rgba(141, 162, 180, 0.9);
cursor: pointer;
}
.nav-link {
margin-right: 1em !important;
}
.nav-link:hover {
color: #4bb2f9 !important;
}
.navbar-collapse {
justify-content: flex-end;
}<!doctype html>
<html lang="en">
<head>
<!-- Meta tags -->
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1 viewport-fit=cover">
<meta name="description" content="Actin Art homepage"/>
<meta name="author" content="Nick Riddiford">
<meta http-equiv="content-type" content="text/html"/>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
</head>
<!--Scroll spy-->
<body data-spy="scroll" data-target=".navbar" data-offset="50" class="post">
<nav class="navbar navbar-expand-md navbar fixed-top">
<!-- Brand -->
<a class="navbar-brand navbar-left" href="index.html">
<img src="images/UK_flag.png" alt="Logo">
</a>
<a class="navbar-brand navbar-left" href="index_fr.html">
<img src="images/FR_flag.png" alt="">
</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-value="about" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" data-value="school-workshops" href="#school-workshops">School Workshops</a>
</li>
<li class="nav-item">
<a class="nav-link" data-value="books" href="#books">Books</a>
</li>
<li class="nav-item">
<a class="nav-link" data-value="exhibitions" href="#exhibitions">Exhibitions</a>
</li>
<li class="nav-item">
<a class="btn" href="mailto:asso.actin@gmail.com">
<i class="fas fa-envelope fa-2x"></i>
</a>
</li>
</ul>
</div>
</nav>
<div class="flex-container mt-5 reveal" id="about">
<h1 class="text-center display-3 mb-3">About</h1>
<div class="row justify-content-center h-100">
<div class="col-xs-12 col-md-6 col-lg-4 reveal">
<p>Actin Art - <strong>L’association des Artistes et des Scientifiques Actine</strong> - is a science
communication project that combines science and art. It aims to raise general public interest in the
sciences and explain recent scientific discoveries. We are creating a series of short, illustrated,
science-based books that accurately relay science via fun, adventure stories for 3-5 year olds.</p>
<p class="reveal">As the science is accurate, the parents and teachers reading the stories to the children
will learn too, and be better able to explain the science to the children. The characters in our stories
are based on the real molecules, proteins and cells that scientists study in the lab. Our aim is that these books will inspire
children and adults to become as excited as we are by cells, molecules and biology in general!</p>
</div>
<div class="col-xs-12 col-md-6 col-lg-4 reveal">
<p>
</p>
<img src="images/ActinArt_s2.jpg" alt="Actin Art" class="img-fluid">
</div>
</div>
</div>
<div class="flex-container mt-5 reveal" id="school-workshops">
<h1 class="text-center display-3 mb-3">School workshops</h1>
<div class="row justify-content-center h-100">
<div class="col-xs-12 col-md-6 col-lg-4 reveal">
<img src="images/cadherine-Joann.jpg" alt="Workshop" class="img-fluid">
<p>
</p>
</div>
<div class="col-xs-12 col-md-6 col-lg-4 reveal">
<p>We recently held a workshop at the Lyonnais nursery located in the 5th arrondissement in Paris. After
around 15 minutes of storytelling with our artwork, we held activities that related to some of our
stories. This was a huge success, and the children were really engaged with our stories. After
following-up with the school three months later we were delighted to discover that the children
remembered some of the key concepts from our stories!</p>
<p class="reveal">The school was very grateful for our involvement, and is looking forward to our next
workshop – as are
we! In fact, we would like to hold similar sessions in other nurseries (ages 3 – 5) around Paris. If you
would like to invite us to hold one at your school – please <a href="mailto:asso.actin@gmail.com">e-mail
us!</a></p>
</div>
</div>
</div>
<div class="flex-container mt-5 reveal" id="books">
<h1 class="text-center mb-3 display-3">Books</h1>
<div class="row justify-content-center h-100">
<div class="col-xs-12 col-md-6 col-lg-4 reveal">
<p>We have been working very hard on publishing some of our stories, and are delighted to announce that the
first three – part of the Jeunesse Esprits Curieux collection – will be published in November 2018!
These books are aimed at children aged 3+, and have been written by members of our group – working
scientists who are specialists in their field and want to help children (and adults) become excited
about science. For each book, the author and illustrator have worked hard to make the story both
scientifically accurate, as well as exciting and beautiful.
</p>
</div>
<div class="col-xs-12 col-md-6 col-lg-4 reveal">
<p>
</p>
<img src="images/Book_example_paint_s.jpg" alt="Kitten painters" class="img-fluid">
</div>
</div>
</div>
<div class="flex-container mt-5 reveal" id="exhibitions">
<h1 class="text-center mb-3 display-3">Exhibitions</h1>
<div class="row justify-content-center h-100">
<div class="col-xs-12 col-md-6 col-lg-4 reveal">
<img src="images/Exhibition_s.jpg" alt="Poster" class="img-fluid" width="500">
<p>
</p>
</div>
<div class="col-xs-12 col-md-6 col-lg-4 reveal">
<p>To complement the books we are publishing, and to celebrate the beautiful artwork each book contains, we
are planning an exhibition ‘Le Jardin de Curiosites’. This will take place over the summer of 2019
in the Jardin Curie at the Institut Curie. Please <a href="mailto:asso.actin@gmail.com">e-mail us</a> if
you would like to find out more, or follow us on social media
to keep updated!
</p>
</div>
</div>
</div>
<footer class="footer bg-dark">
<div class="text-center">
<a href="//www.facebook.com/Actine.SciArt/" target="_blank"><i class="fab fa-facebook-f fa-2x"></i></a>
<a href="//twitter.com/ActineSciart" target="_blank"><i class="fab fa-twitter fa-2x"></i></a>
<a href="//www.instagram.com/actine.sciart/" target="_blank"><i class="fab fa-instagram fa-2x"></i></a>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<script src="https://unpkg.com/scrollreveal@3.3.2/dist/scrollreveal.min.js"></script>
</body>最佳答案
因为滚动不适合 <div class="flex-container reveal">考虑将您的 flex 容器包装在额外的 <div> 中并将 id 放在那个外部 div 上
<div id="about">
<div class="flex-container mt-5 reveal">
关于javascript - 从 Bootstrap 导航栏滚动到元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52622885/