我已经开发了单页网站并在我点击导航元素边框底部时使用了引导滚动 spy 之前没有显示这个问题 我已经添加了脚本,现在没有问题了。
但是当我单击导航链接时,平滑滚动不起作用链接直接放置到 没有平滑滚动的特定部分请任何人帮助我
引用:http://floretmedia.net/temp/pbee/
<script>
$(document).ready(function(){
var headerHeight = $('header').innerHeight();
scrollTop: target.offset().top - headerHeight //offset height of header here too.
});
</script>
<body id="lcp1" data-spy="scroll" data-target=".navbar" data-offset="70">
<header>
<div class="custom-container">
<div class="header-right">
<div class="navbar-holder"> <!-- navbar-holder -->
<nav class="navbar navbar-default"> <!-- navbar-inverse -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed blue" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="ease cf">
<a class="navbar-brand" href="./">
<img src="images/logo.png" alt="sfatech Logo">
</a>
</div>
</div> <!-- /.navbar-header -->
<div id="navbar" class="collapse navbar-collapse cf"> <!-- nav-collapse -->
<ul class="nav navbar-nav navbar-right navbrdr">
<li class="active"><a href="./">HOME </a></li>
<li><a href="#features"> FEATURES </a></li>
<li><a href="#plans">PRICING</a></li>
<li><a href="#contact">CONTACT</a></li>
<li><a href="includes/enquiry_form.php" class="signup fancybox" data-fancybox-type="iframe">SIGN UP</a></li>
</ul> <!-- /.navbar-nav -->
</div> <!--/.nav-collapse -->
</nav> <!-- /.navbar-inverse -->
</div> <!-- /.navbar-holder -->
</div><!-- header-right -->
</div><!-- custom-container -->
</header>
最佳答案
你可以试试这个
jQuery(document).ready(function(){
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
})
关于javascript - 如何为 Bootstrap scrollspy 添加平滑的滚动过渡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52586560/