我在锚标记中有一个按钮，当我单击该按钮时，我希望它使用id“ bodycontainer”平滑滚动到div。
问题在于我认为的javascript有什么想法吗？
$(function(){
$('.icon-menu').click(function() {
$('.menu').animate({
left: "0px"
}, 200);
$('body').animate({
left: "285px"
}, 200);
});
$('.icon-close').click(function() {
$('.menu').animate({
left: "-285px"
}, 200);
$('body').animate({
left: "0px"
}, 200);
});
$('#bodycontainer').click(function() {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.substr(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
});
});body {
font-family: 'Nunito', sans-serif;
padding: 0;
margin: 0;
display: block;
}
head {
font-family: 'Nunito', sans-serif;
height: 0px;
width: 0px;
margin: 0;
}
#wrapper{
overflow: auto;
}
.introcontainer {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)),
url("images/image.png") no-repeat;
background-size: 100% auto;
}
#text {
position: absolute;
top: 30%;
left: 35%;
font-family: 'Nunito', sans-serif;
text-align: center;
color: white;
}
.introcontainer button {
position: absolute;
left: 22%;
top: 100%;
width: 250px;
height: 47px;
color: white;
font-family: 'Nunito', sans-serif;
font-size: 30px;
text-align: center;
text-decoration: none;
background-color: Transparent;
-webkit-transition-duration: 0.6s;
transition-duration: 0.6s;
cursor: pointer;
}
.introcontainer button:hover {
background: rgba(255, 255, 255, 0.35);
}
.menu {
font-family: 'Nunito', sans-serif;
background: #202024 url('images/menu-background.png') repeat left top;
left: -285px;
height: 100%;
position: fixed;
width: 285px;
font-size: 15px;
}
.menu ul {
border-top: 1px solid #636366;
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
border-bottom: 1px solid #636366;
font-family: 'Open Sans', sans-serif;
line-height: 45px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
}
.menu a {
color: #fff;
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
}
.icon-close {
cursor: pointer;
padding-left: 225px;
padding-top: 10px;
}
.icon-menu {
width: 75px;
color: #fff;
cursor: pointer;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
padding-bottom: 25px;
padding-left: 25px;
padding-top: 25px;
text-decoration: none;
text-transform: uppercase;
}
.icon-menu i {
margin-right: 5px;
top: 20:
}
#bar {
text-align: center;
}
#bodycontainer {
position: absolute;
top: 100vh;
left: 0;
height: 100vh;
width: 100%;
background: red;
}<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>J-Coding</title>
<meta name="author" content="John Murray">
<link href="https://fonts.googleapis.com/css?family=Nunito"
rel="stylesheet">
<link rel="stylesheet" type="text/css" href="homepage-menu.css">
</head>
<body>
<div class="introcontainer">
<div class="menu" id="sidenav">
<div class="icon-close">
<img src="images/closing-icon.png">
</div>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="map.html">Map</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div class="icon-menu">
<img id="icon-image" src="images/menu-icon.png">
</div>
<div id="text">
<h1>Hi, Welcome to J-Coding.</h1>
<h3>
My name is John.<br /> On my free time I like to fly my drone, code, and game.
</h3>
<a href="#bodycontainer">
<button id="start">Lets get Started</button>
</a>
</div>
</div>
<div id="bodycontainer">testing testing testing</div>
<script src="\\path\to\the\jquery.scrollTo.js file"></script>
<script src="//code.jquery.com/jquery-3.2.0.min.js"></script>
<script>
window.jQuery
|| document
.write('<script src="js/jquery-3.2.0.js"><\/script>');
</script>
<!-- Loads CDN, if CDN fails to load, load local version -->
<script src="js/homepage-menu.js"></script>
</body>
</html>最佳答案
非常复杂
JS应该看起来像
$('#start').click(function() {
$('html,body').animate({
scrollTop: $('#bodycontainer').position().top
}, 1000 );
});