jquery - 内部链接滚动不起作用

Question

我有 3 个有效的内部链接，但是，我也有 2 个无效的“到顶部”链接。自从我删除了导航并添加了引导导航后，它们就停止工作了。但我不明白为什么引导导航不能处理同样的事情。

var main = function() {



$(window).scroll(function(){
	$(".dropdown-menu").slideUp();
  $(".dropdown img").removeClass("rotate");
	});



//Internal link smooth scrolling

$("#topper").click(function(){
  event.preventDefault();
  $("html, body").animate({
    scrollTop:0
  },"slow");
});

$('a[href^="#"]').on('click',function (e) {
      e.preventDefault();

      var target = this.hash;
      var $target = $(target);

      $('html, body').stop().animate({
          'scrollTop': $target.offset().top
      }, 900, 'swing', function () {
          window.location.hash = target;
      });
  });


};



$(document).ready(main);

/*body*/
html, body {
	font-size: 100%;
	height: 100%;
	font-family: 'Lato', sans-serif;
	font-weight: 200;
}

/*nav*/
.navbar {
	background: #fff;
	border-bottom: solid #6ed3cf 2px;
	margin: 0;

	/*Kun on scroll!!!
	-moz-box-shadow:    0 2px 0 0 #6ed3cf;
    -webkit-box-shadow: 0 2px 0 0 #6ed3cf;
    box-shadow:         0 2px 0 0 #6ed3cf;
    */
}


.navbar p {
	color: black;
	font-weight: 500;
}

.container-fluid {
	padding-left: 25px;
	padding-right: 25px;
}

.navbar-default .navbar-nav>li>a {
	color: black;
}

.navbar-default .navbar-nav>li {
	border-bottom: solid transparent 2px;
}

.navbar-default .navbar-nav>li>a:hover {
	color: #6ed3cf;
}

/*
.navbar-default .navbar-nav>li>a:active {
	color: #6ed3cf;
}
*/

.navbar-default .navbar-toggle .icon-bar {
	background: black;
	-webkit-transition: width .8s, height .8s, -webkit-transform .8s; /* Safari */
    transition: width .8s, height .8s, transform .8s;
}



.navbar-default .navbar-toggle {
	border: none;
	background: transparent;
}

.navbar-default .navbar-toggle:hover {
	background: transparent;
}

.navbar-default .navbar-toggle:visited {
	background: transparent;
}

.navbar-default .navbar-toggle .icon-bar {
	width: 22px;
	transition: all 0.2s;
}

.navbar-default .navbar-toggle .top-bar {
	transform: rotate(45deg);
    transform-origin: 10% 10%;
}

 .navbar-default .navbar-toggle .middle-bar {
    opacity: 0;
  }

  .navbar-default .navbar-toggle .bottom-bar {
    transform: rotate(-45deg);
    transform-origin: 10% 90%;
  }

  .navbar-toggle.collapsed .top-bar {
  	transform: rotate(0);
  }

   .navbar-toggle.collapsed .middle-bar {
    opacity: 1;
  }

  .navbar-toggle.collapsed .bottom-bar {
    transform: rotate(0);
  }

/*Header*/
.header {
	/*/Users/jonashansen/Desktop/hjemmeside/img*/
	background: url(/img/arg.jpg) no-repeat center center;
	background-size: cover;
	background-attachment: fixed;
	position: relative;
	box-shadow: inset 0 0 0 1000px rgba(60, 195, 191, 0.7);
	min-height: 100%;
	display:flex;
  	justify-content:space-between;
  	align-items: center;
}

#rowheader h1 {
	font-weight: 200;
	text-align: center;
	color: #fff;
	font-size: 3em;
}

#rowheader h2 {
	font-weight: 200;
	text-align: center;
	color: #fff;
	font-size: 2em;
}
/*
#rowheader h1 {
	font-family: 'Lato', sans-serif;
	font-size: 3em;


}
*/

/*Section1*/
#section1 {
	text-align: center; 
	margin-top: 3em;
	margin-bottom: 3em; 
	height: auto;
	position: relative;
}

#section1 h2 {
	font-size: 2em;
	font-weight: 200;
	text-align: center;
	padding: 0 2.5em 0.5em;
	display: block;
}

#section1 h3 {
	font-weight: 200;
}

#section1 p {
	line-height: 2em;
	padding: 1em 0 0;
}

#section1 a {
	color: #3DD0AC;
	text-decoration: none;
}

#section1 a:hover {
	color: black;
}

/*Section2*/
#section2 {
	line-height: 1.8em;
	height: auto;
	margin-top: 2em;
	margin-bottom: 2em;
	position: relative;
}

#section2 h2 {
	font-size: 2em;
	font-weight: 200;
	text-align: center;
	padding: 0 2.5em 1em;
	display: block;
	margin: 0;
}

#section2 h3 {
	font-weight: 200;
}

#section2 p {
	padding: 0 0 0.5em;
	padding-bottom: 2em; 
}

#section2 a {
	color: #3DD0AC;
	text-decoration: none;
}

#section2 img {
	width: 100%;
    height: 100%;
}

#img-wrapper {
	display: inline-block;
	overflow: hidden;
}

#img-wrapper img {
	-webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -ms-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
}

#img-wrapper img:hover {
	-webkit-transform:scale(1.1); /* Safari and Chrome */
    -moz-transform:scale(1.1); /* Firefox */
    -ms-transform:scale(1.1); /* IE 9 */
    -o-transform:scale(1.1); /* Opera */
    transform:scale(1.1);
}

/*Section3*/
#section3 {
	height: 50%;
	background: #6ed3cf;
	text-align: center;
	padding: 0 0 0.5em;
	height: 20em;
}

#section3 h2 {
	font-size: 2em;
	font-weight: 200;
}

#section3 i {
	padding: 0.5em;
	color: black;
}

/*Footer*/
#footer {
	background:#fff;
	color: black;
	height: 6%;
	width: 100%;
	display: table;
}

#footer a {
	font-size: 0.8em;
  	text-align: center;
  	vertical-align: top;
  	display: none;
  	padding-top: 1.2em;
  	color: black;
  	font-weight: 500;
  	text-decoration: none;
}

#footer p {
  font-size: 0.7em;
  text-align: center;
  vertical-align: bottom;
  display: table-cell;
  padding-bottom: 1.2em;
}

@media only screen and (max-width: 767px) {


	.logo p {
	font-size: 60%;
	color: black;
	font-family: 'Lato', sans-serif;
	font-weight: 700;
	margin-top: 0.4em;
	letter-spacing: 0.5em;
	}

	.header {
	background:url(/img/arg.jpg) no-repeat center center;
	background-size: cover;
	position: relative;
	box-shadow: inset 0 0 0 1000px rgba(60, 195, 191, 0.7);
	min-height: 100%
	}

	#rowheader {
	margin-top: 3em;
	}

	#rowheader h1 {
		font-size: 2em;
	}

	#section1 p {
	padding: 0 2em;
	}

	#footer {
		height:25%;
	}

	#footer a {
  	text-align: center;
  	vertical-align: top;
  	display: table-cell;
  	padding-top: 1.2em;
  	font-weight: bold;
  	font-size: 0.9em;
	}

	#footer p {
	display: table-row;
	}

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Collect the nav links, forms, and other content for toggling -->
    <nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar top-bar"></span>
        <span class="icon-bar middle-bar"></span>
        <span class="icon-bar bottom-bar"></span>
      </button>
      <a class="navbar-brand" id="topper" href="#"><p>&lt;&frasl;BY&#95;SUONPERA&gt;</p></a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#About">About</a></li>
        <li><a href="#My_Work">My Work</a></li>
        <li><a href="#Contact">Contact</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

<!-- Header -->
	<div class="header">
		<div class="container" style="display:flex;justify-content:center;align-items:center;">
			<div id="rowheader">
				<h1>HI</h1>
				<h2>blablablablar</h2>
			</div>
		</div>
	</div>

<!-- Section1 -->
	<div id="section1" class="container">
		<h2 id="About">About</h2>
		<div class="row">
			<div class="col-md-6 col-md-offset-3">
				<h3>Me</h3>
				<p>blablablablabla</p><br><br>	
			</div>
		</div>			
	</div>



<!-- Section2 -->
	<div  id="section2" class="container">
		<h2 id="My_Work">My Work</h2>
	</div>

<!-- Section3 --> 
	<div id="section3" style="display:flex;justify-content:center;align-items:center;">
		<div>
			<h2 id="Contact">Want to get in touch?</h2>	
			<div class="container">
				<div class="row">
					<div class="col-md-6 col-md-offset-3">
						<p>blablablabla</p>
						<a href="#"><i class="fa fa-envelope fa-2x" aria-hidden="true"></i></a>	
						<a href="#"><i class="fa fa-linkedin-square fa-2x" aria-hidden="true"></i			></a>		
					</div>
				</div>
			</div>
		</div>
	</div>


<!-- Footer -->
	<div id="footer">
		<a id="topper" href="#">BACK TO TOP</a>
		<p>Copyright &copy; 2016 </p>
	</div>
</body>
</html>

Answer 1

你错过了 event来自 $("#topper").click(function(){ 的参数:

$("#topper").click(function(event){
  event.preventDefault();
  $("html, body").animate({
    scrollTop:0
  },"slow");
});

同时添加 on点击事件是这样的:

$(document).on('click', "#topper", function(event) {
  event.preventDefault();
  var target = $(this).attr('id');
  var $target = $("#" + target);
  console.log($target);
  $('html, body').animate({
    scrollTop: 0
  }, 'slow');
});

查看更新的 fiddle here .