内部链接滚动不起作用

时间：2016-12-19 11:06:49

标签： jquery html css

我有3个内部链接可以工作，但是，我也有2个＆＃34; To Top＆＃34;链接不起作用。自从我擦除导航器后，他们就停止了工作，而是添加了bootstrap导航器。但我不明白为什么引导导航器不应该能够处理同样的事情。

＆＃13;
＆＃13; 
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);
＆＃13; 
/*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;
	}

}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

您错过了event的{​​{1}}参数：

$("#topper").click(function(){

同时添加$("#topper").click(function(event){ event.preventDefault(); $("html, body").animate({ scrollTop:0 },"slow"); }); 点击事件，如下所示：

on

请参阅更新的小提琴here。

答案 1 :(得分：0)

只需在navtop的{​​{1}}附近添加#一词，然后在导航栏中添加ID 

<a id="navtop" href="#topper">BACK TO TOP</a>
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;
  }
}

相关问题
最新问题