jQuery 滚动效果不起作用

Question

请帮助我解决我的问题，我的滚动效果不起作用。 我无法确定问题。 我正在使用引导程序 4。这是我的代码。

 //SCROLL EFFECT $(".nav-link").click(function () { var href = $(this).attr('href'); scrollAmount = 0; if (href == "#home") scrollAmount = 0; else scrollAmount = $(href).offset().top - 65; $('html, body').animate({ scrollTop: scrollAmount }, 1000); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Navbar --> <nav class="navbar navbar-toggleable-sm navbar-light bg-faded fixed-top scrollspy"> <div class="container nav-container"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="main-navbar" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="index.html" title="DECOREA, Inc. Philippines, Supplier of Quality Office Furniture, Artificial Grass and Window Blinds">Decorea</a> <div class="collapse navbar-collapse" id="main-navbar"> <ul class="navbar-nav ml-auto" data-spy="affix"> <li class="nav-item active"> <a class="nav-link" href="#home">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#section-about">About Us</a> </li> <li class="nav-item"> <a class="nav-link" href="#section-services">Services </a> </li> <li class="nav-item"> <a class="nav-link" href="#section-contact">Contact</a> </li> </ul> </div> </div> </nav> <!-- End of Navbar -->

我感谢您的帮助。 先感谢您。

Answer 1

尝试使用这两个片段，我已经尝试过方法

尝试使用数据（）；

 $(document).ready(function(){ var countTimer = 1000; $('a').on('click', function(event){ //event.preventDefault(); var currentID = $(this).attr('id'); //console.log(currentID); var destination = $(this).data('anchor'); //console.log(destination); var p = $('#' + destination); var position = p.position(); $('body,html').animate({ scrollTop:position.top }, countTimer); }); })

 body { float: left; width: 100%; padding-bottom: 20px; } .common { width: 100%; float: left; height: 400px; background: #000; margin-top: 30px; } .allbody { float: left; width: 100%; } a { display: inline-block; padding: 15px; } header { float: left; width: 100%; position: fixed; top: 0; left: 0; background: #fff; } .common h2 { font-size: 30px; color: #fff; text-align: center; padding-top: 10%; }

 <header> <a href="#firstDestination" data-anchor="firstDestination">first page</a> <a href="#secondDestination" data-anchor="secondDestination">second page</a> <a href="#thirdDestination" data-anchor="thirdDestination">third page</a> <a href="#fourthDestination" data-anchor="fourthDestination">fourth page</a> </header> <div class="allbody"> <div class="common" id="firstDestination" ><h2>First Page</h2></div> <div class="common" id="secondDestination"><h2>Second Page</h2></div> <div class="common" id="thirdDestination" ><h2>Third Page</h2></div> <div class="common" id="fourthDestination" ><h2>Fourth Page</h2></div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

尝试使用 get href 方法

 // click-to-scroll behavior $("a").click(function (e) { e.preventDefault(); var section = $(this).attr('href'); $("html, body").animate({ scrollTop: $(section).offset().top }, 1000, function () { window.location.hash = section; }); });

 body { float: left; width: 100%; padding-bottom: 0px; } .common { width: 100%; float: left; height: 100vh; display: table; } .allbody { float: left; width: 100%; } a { display: inline-block; padding: 15px; } header { float: left; width: 100%; position: fixed; top: 0; left: 0; background: #fff; } .common h2 { font-size: 30px; color: #fff; text-align: center; padding-top: 10%; display: table-cell; vertical-align: middle; } #firstDestination { background: #000; } #secondDestination { background: #999; } #thirdDestination { background: #ccc; } #fourthDestination { background: #c1c1c1; }

 <header> <a href="#firstDestination">first page</a> <a href="#secondDestination" >second page</a> <a href="#thirdDestination">third page</a> <a href="#fourthDestination">fourth page</a> </header> <div class="allbody"> <div class="common" id="firstDestination" ><h2>First Page</h2></div> <div class="common" id="secondDestination"><h2>Second Page</h2></div> <div class="common" id="thirdDestination" ><h2>Third Page</h2></div> <div class="common" id="fourthDestination" ><h2>Fourth Page</h2></div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>