我正在为一个小型协会开发一个网站。它是使用引导程序4构建的，我有一个navbar链接到多个flex-container。我希望这些链接可以平滑滚动到这些元素。
我正在使用以下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文件，该文件在用户滚动浏览时使用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>
答案 0 :(得分：0)
由于滚动<div class="flex-container reveal">的使用效果不佳，请考虑将Flex容器包装在另外的<div>中，并将ID放在该外部div上
<div id="about">
<div class="flex-container mt-5 reveal">