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

尝试两个 sn-p ，我已经尝试过方法

试试 data();

$(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>