Question

我在锚标签中有一个按钮，当我点击按钮时，我希望它能够使用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>

Answer 1

非常复杂， JS应该看起来像

$('#start').click(function() {
    $('html,body').animate({
        scrollTop: $('#bodycontainer').position().top
    }, 1000 );

});

自动滚动到Div

1 个答案: