javascript - 导航到页面的某个部分

标签 javascript html css

我正在开发一个静态页面并使用 id 和 href 引用导航到各个部分。选择一个部分后,滚动条不会滑入该部分的开头。它隐藏了该部分的标签部分。有人可以帮我弄这个吗。页面中的一些图片无法正常工作,请忽略它们。

var menuObject = document.getElementById("open-menu");
menuObject.addEventListener('click', function() {
  var asideObject = document.getElementById('offcanvas');
  asideObject.classList.add('open');
})
var closeBtn = document.getElementById('close-btn');
closeBtn.addEventListener('click', function() {
  var asideObject = document.getElementById('offcanvas');
  asideObject.classList.remove('open');
  event.preventDefault();
})
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
a {
  text-decoration: none;
}
a:active,
a:focus,
a:hover,
a:visited {
  text-decoration: none;
}
@font-face {
  font-family: "Lato";
  src: url('./assets/fonts/lato-regular.eot');
  src: url('./assets/fonts/lato-regular.woff') format('woff'), url('./assets/fonts/lato-regular.woff2') format('woff2'), url('./assets/fonts/lato-regular.ttf') format('truetype'), url('./assets/fonts/lato-regular.svg#Lato') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Bitter';
  src: url('./assets/fonts/Bitter-Regular.eot');
  src: url('./assets/fonts/Bitter-Regular.woff') format('woff'), url('./assets/fonts/Bitter-Regular.ttf') format('ttf'), url('./assets/fonts/Bitter-Regular.svg') format('svg');
}
html,
body {
  font-family: 'Lato', Arial, sans-serif;
  line-height: 1;
  margin: 0;
  padding: 0;
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}
body {
  color: #36384c;
  background-color: #e9dccd;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1;
  margin: 0 0 20px;
}
h1 {
  font-size: 7.5rem;
}
h2 {
  font-size: 2.125rem;
}
h3 {
  font-size: 1.875rem;
}
.app-header {
  position: fixed;
  width: 100%;
  font-size: 1.121rem;
  color: #fff;
  padding: 10px;
  background-color: #36384c;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25);
  z-index: 1;
}
.app-header .header-wrapper {
  max-width: 1100px;
  margin: 0 auto;
}
.app-header .header-wrapper .brand-logo {
  display: inline-block;
  color: inherit;
  vertical-align: middle;
  width: 150px;
  height: 60px;
}
.app-header .header-wrapper .brand-logo img {
  height: 100%;
}
.app-header .header-wrapper .header-nav {
  display: none;
  margin: 0;
}
.app-header .header-wrapper .header-nav > a {
  color: inherit;
  padding: 0 15px;
}
.app-header .header-wrapper .open-menu {
  display: inline-block;
  position: absolute;
  right: 5px;
  width: 55px;
  top: 16px;
  padding: 12px;
}
.app-header .header-wrapper .open-menu span {
  display: block;
  background-color: #fff;
  height: 2px;
  width: 100%;
  margin-bottom: 8px;
}
aside {
  display: none;
  position: fixed;
  width: 100%;
  height: 100vh;
  font-size: 1.121rem;
  color: #fff;
  padding: 10px;
  background-color: #36384c;
}
aside.open {
  display: block;
  z-index: 10;
}
aside .offcanvas-content {
  margin-top: 10%;
  text-align: center;
}
aside .close-btn {
  display: inline-block;
  width: 44px;
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 10px;
  margin: 10px;
}
aside .close-btn span {
  position: absolute;
  display: block;
  height: 2px;
  width: 100%;
  background-color: #fff;
}
aside .close-btn span:first-child {
  transform: rotate(135deg);
}
aside .close-btn span:last-child {
  transform: rotate(225deg);
}
aside .offcanvas-item {
  color: inherit;
  display: block;
  line-height: 2;
  font-size: 1.25rem;
}
main {
  padding-top: 80px;
}
#Main {
  position: relative;
  background-image: url('./assets/images/coffee.jpg');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
#Main.container {
  max-width: none;
}
#Main .overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
}
#Main .full-width {
  position: relative;
  width: 100%;
  color: #fff;
  margin: 0 auto;
  text-align: center;
  margin-top: -2rem;
}
#Main .full-width h1 {
  font-family: Bitter, serif;
  font-weight: normal;
  margin: 0 0 16px;
}
#Main .full-width h2 {
  margin: 0 0 20px;
}
.container {
  width: 100%;
  max-width: 1200px;
  min-height: 600px;
  padding: 40px 30px;
  margin: 0 auto;
}
.block-wrapper:nth-child(odd) {
  color: #ffffff;
  background-color: #36384c;
}
#About p {
  font-size: 1.125rem;
  line-height: 1.8;
}
#About .grid-row div.image-bg {
  height: 200px;
  margin: 0 0 20px;
}
#About .grid-row div.image-bg:first-child {
  background-image: url('./assets/images/coffee-grid.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
#About .grid-row div.image-bg:nth-child(2) {
  background-image: url('./assets/images/people.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
#About .grid-row div.image-bg:nth-child(3) {
  background-image: url('./assets/images/coffee-grid3.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
#About .grid-row div.image-bg:last-child {
  background-image: url('./assets/images/blackcoffee.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
#Menu .grid-row {
  text-align: center;
}
#Menu .grid-row img {
  width: 100%;
}
#Location .grid-row {
  margin-top: 30px;
}
#Location .grid-row .grid-item {
  margin: 0 10px;
}
#Location .grid-row .grid-item img {
  width: 460px;
}
.block-content.text {
  font-size: 1.125rem;
  padding: 1.5rem 0;
  line-height: 1.8;
}
footer {
  color: #fff;
  padding: 20px 0;
  text-align: center;
  background-color: #36384c;
}
@media only screen and (min-width: 655px) {
  main {
    padding-top: 100px;
  }
  .app-header .header-wrapper .brand-logo {
    height: 80px;
  }
  .app-header .header-wrapper .header-nav {
    display: inline-block;
    float: right;
    padding: 32px 0;
  }
  .app-header .header-wrapper .open-menu {
    display: none;
  }
  aside {
    display: none;
  }
  #Main .full-width {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
  }
  #About .grid-row div.image-bg {
    display: inline-block;
    width: 21%;
    height: 200px;
    margin-left: 12px;
    margin-right: 12px;
  }
  #Menu .grid-item {
    display: inline-block;
    width: 48%;
  }
  #Menu .grid-item:nth-child(odd) {
    float: right;
  }
  #Location .grid-row .grid-item {
    display: inline-block;
    float: left;
  }
  #Location .grid-row .grid-item img {
    width: auto;
  }
}
@media only screen and (min-width: 655px) and (max-width: 990px) {
  #About .grid-row div.image-bg {
    display: inline-block;
    width: 46%;
    margin-left: 10px;
    margin-right: 10px;
  }
}
@media only screen and (min-width: 990px) and (max-width: 1000px) {
  
}
@media only screen and (max-width: 665px) {
  #Main.container {
    min-height: auto;
  }
}
@media only screen and (min-width: 800px) {
  .block-content.text {
    max-width: 80%;
    margin: 0 auto;
  }
}
<header class="app-header">
  <div class="header-wrapper">
    <a class="brand-logo" href="#Main">
      <img src="./assets/images/logo-central-coffee.png"></a>
    <nav class="header-nav">
      <a href="#About">About</a>
      <a href="#Menu">Menu</a>
      <a href="#Location">Location</a>
    </nav>
    <a id="open-menu" class="open-menu" href="#">
      <span></span>
      <span></span>
      <span></span>
    </a>
  </div>
</header>
<aside id="offcanvas" class="offcanvas">
  <div class="offcanvas-content">
    <a id="close-btn" class="close-btn" href="">
      <span></span>
      <span></span>
    </a>
    <a class="offcanvas-item" href="#About">About</a>
    <a class="offcanvas-item" href="#Menu">Menu</a>
    <a class="offcanvas-item" href="#Location">Location</a>
  </div>
</aside>
<main>
  <section id="Main" class="container">
    <div class="overlay"></div>
    <div class="full-width">
      <hgroup>
        <h1>Central Coffee</h1>
        <h3>Bespoke organically-sourced coffee</h3>
      </hgroup>
    </div>

  </section>
  <section id="About" class="block-wrapper">
    <div class="container">
      <div class="block-content text">
        <h2>About</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis sagittis urna, a fermentum mauris. Mauris sagittis eu urna at sollicitudin. Sed et dui accumsan, vulputate dui ut, fringilla tellus. Vivamus a ex commodo, vulputate metus gravida,
          congue arcu. Fusce vehicula laoreet lorem vel lacinia. Etiam ac erat turpis. Morbi nec urna aliquet, placerat nisl ac, venenatis justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
        <div class="grid-row">
          <div class="image-bg"></div>
          <div class="image-bg"></div>
          <div class="image-bg"></div>
          <div class="image-bg"></div>
        </div>
      </div>
    </div>
  </section>
  <section id="Menu" class="block-wrapper">
    <div class="container">
      <div class="block-content text">
        <h2>Menu</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis sagittis urna, a fermentum mauris. Mauris sagittis eu urna at sollicitudin. Sed et dui accumsan, vulputate dui ut, fringilla tellus. Vivamus a ex commodo, vulputate metus gravida,
          congue arcu. Fusce vehicula laoreet lorem vel lacinia. Etiam ac erat turpis. Morbi nec urna aliquet, placerat nisl ac, venenatis justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div class="grid-row">
          <div class="grid-item">
            <header>DRINKS</header>
            <img src="./assets/images/food-3249174_640.jpg">
            <div>
              <p>La Catalina (Colombia)</p>
              <p>Guarumales (Ecuador)</p>
              <p>Rukondo (Rwanda)</p>
              <p>Peppermint Tea</p>
              <p>Black tea</p>
            </div>
          </div>
          <div class="grid-item">
            <header>FOOD</header>
            <img src="./assets/images/coffee-3297326_640.jpg">
            <div>
              <p>Frittata (Herb and Veggie, Italian, Corned Beef)</p>
              <p>Breakfast sandwich</p>
              <p>Cobb salad</p>
              <p>Various baked goods</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section id="Location" class="block-wrapper">
    <div class="container">
      <div class="block-content text">
        <h2>Location</h2>
        <div class="grid-row">
          <div class="grid-item">
            <img src="./assets/images/map.png" alt="">
          </div>
          <div class="grid-item">
            <header>Hours</header>
            <p>Mon-Thurs -- 7am - 8pm</p>
            <p>Fri-Sun -- 8am - 10pm</p>
          </div>
        </div>

      </div>
    </div>
  </section>
</main>
<footer> @2018 Central Coffee</footer>

最佳答案

您可以像这样向每个部分添加一些填充:

var menuObject = document.getElementById("open-menu");
menuObject.addEventListener('click', function() {
  var asideObject = document.getElementById('offcanvas');
  asideObject.classList.add('open');
})
var closeBtn = document.getElementById('close-btn');
closeBtn.addEventListener('click', function() {
  var asideObject = document.getElementById('offcanvas');
  asideObject.classList.remove('open');
  event.preventDefault();
})
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
a {
  text-decoration: none;
}
a:active,
a:focus,
a:hover,
a:visited {
  text-decoration: none;
}
@font-face {
  font-family: "Lato";
  src: url('./assets/fonts/lato-regular.eot');
  src: url('./assets/fonts/lato-regular.woff') format('woff'), url('./assets/fonts/lato-regular.woff2') format('woff2'), url('./assets/fonts/lato-regular.ttf') format('truetype'), url('./assets/fonts/lato-regular.svg#Lato') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Bitter';
  src: url('./assets/fonts/Bitter-Regular.eot');
  src: url('./assets/fonts/Bitter-Regular.woff') format('woff'), url('./assets/fonts/Bitter-Regular.ttf') format('ttf'), url('./assets/fonts/Bitter-Regular.svg') format('svg');
}
html,
body {
  font-family: 'Lato', Arial, sans-serif;
  line-height: 1;
  margin: 0;
  padding: 0;
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}
body {
  color: #36384c;
  background-color: #e9dccd;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1;
  margin: 0 0 20px;
}
h1 {
  font-size: 7.5rem;
}
h2 {
  font-size: 2.125rem;
}
h3 {
  font-size: 1.875rem;
}
.app-header {
  position: fixed;
  width: 100%;
  font-size: 1.121rem;
  color: #fff;
  padding: 10px;
  background-color: #36384c;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25);
  z-index: 1;
}
.app-header .header-wrapper {
  max-width: 1100px;
  margin: 0 auto;
}
.app-header .header-wrapper .brand-logo {
  display: inline-block;
  color: inherit;
  vertical-align: middle;
  width: 150px;
  height: 60px;
}
.app-header .header-wrapper .brand-logo img {
  height: 100%;
}
.app-header .header-wrapper .header-nav {
  display: none;
  margin: 0;
}
.app-header .header-wrapper .header-nav > a {
  color: inherit;
  padding: 0 15px;
}
.app-header .header-wrapper .open-menu {
  display: inline-block;
  position: absolute;
  right: 5px;
  width: 55px;
  top: 16px;
  padding: 12px;
}
.app-header .header-wrapper .open-menu span {
  display: block;
  background-color: #fff;
  height: 2px;
  width: 100%;
  margin-bottom: 8px;
}
aside {
  display: none;
  position: fixed;
  width: 100%;
  height: 100vh;
  font-size: 1.121rem;
  color: #fff;
  padding: 10px;
  background-color: #36384c;
}
aside.open {
  display: block;
  z-index: 10;
}
aside .offcanvas-content {
  margin-top: 10%;
  text-align: center;
}
aside .close-btn {
  display: inline-block;
  width: 44px;
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 10px;
  margin: 10px;
}
aside .close-btn span {
  position: absolute;
  display: block;
  height: 2px;
  width: 100%;
  background-color: #fff;
}
aside .close-btn span:first-child {
  transform: rotate(135deg);
}
aside .close-btn span:last-child {
  transform: rotate(225deg);
}
aside .offcanvas-item {
  color: inherit;
  display: block;
  line-height: 2;
  font-size: 1.25rem;
}
main {
  padding-top: 80px;
}
#Main {
  position: relative;
  background-image: url('./assets/images/coffee.jpg');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
#Main.container {
  max-width: none;
}
#Main .overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
}
#Main .full-width {
  position: relative;
  width: 100%;
  color: #fff;
  margin: 0 auto;
  text-align: center;
  margin-top: -2rem;
}
#Main .full-width h1 {
  font-family: Bitter, serif;
  font-weight: normal;
  margin: 0 0 16px;
}
#Main .full-width h2 {
  margin: 0 0 20px;
}
.container {
  width: 100%;
  max-width: 1200px;
  min-height: 600px;
  padding: 40px 30px;
  margin: 0 auto;
}
.block-wrapper:nth-child(odd) {
  color: #ffffff;
  background-color: #36384c;
}
#About p {
  font-size: 1.125rem;
  line-height: 1.8;
}
#About .grid-row div.image-bg {
  height: 200px;
  margin: 0 0 20px;
}
#About .grid-row div.image-bg:first-child {
  background-image: url('./assets/images/coffee-grid.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
#About .grid-row div.image-bg:nth-child(2) {
  background-image: url('./assets/images/people.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
#About .grid-row div.image-bg:nth-child(3) {
  background-image: url('./assets/images/coffee-grid3.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
#About .grid-row div.image-bg:last-child {
  background-image: url('./assets/images/blackcoffee.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
#Menu .grid-row {
  text-align: center;
}
#Menu .grid-row img {
  width: 100%;
}
#Location .grid-row {
  margin-top: 30px;
}
#Location .grid-row .grid-item {
  margin: 0 10px;
}
#Location .grid-row .grid-item img {
  width: 460px;
}
.block-content.text {
  font-size: 1.125rem;
  padding: 1.5rem 0;
  line-height: 1.8;
}
footer {
  color: #fff;
  padding: 20px 0;
  text-align: center;
  background-color: #36384c;
}
@media only screen and (min-width: 655px) {
  main {
    padding-top: 100px;
  }
  .app-header .header-wrapper .brand-logo {
    height: 80px;
  }
  .app-header .header-wrapper .header-nav {
    display: inline-block;
    float: right;
    padding: 32px 0;
  }
  .app-header .header-wrapper .open-menu {
    display: none;
  }
  aside {
    display: none;
  }
  #Main .full-width {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
  }
  #About .grid-row div.image-bg {
    display: inline-block;
    width: 21%;
    height: 200px;
    margin-left: 12px;
    margin-right: 12px;
  }
  #Menu .grid-item {
    display: inline-block;
    width: 48%;
  }
  #Menu .grid-item:nth-child(odd) {
    float: right;
  }
  #Location .grid-row .grid-item {
    display: inline-block;
    float: left;
  }
  #Location .grid-row .grid-item img {
    width: auto;
  }
}
@media only screen and (min-width: 655px) and (max-width: 990px) {
  #About .grid-row div.image-bg {
    display: inline-block;
    width: 46%;
    margin-left: 10px;
    margin-right: 10px;
  }
}
@media only screen and (min-width: 990px) and (max-width: 1000px) {
  
}
@media only screen and (max-width: 665px) {
  #Main.container {
    min-height: auto;
  }
}
@media only screen and (min-width: 800px) {
  .block-content.text {
    max-width: 80%;
    margin: 0 auto;
  }
}
section {
  padding:50px 0;
}
<header class="app-header">
  <div class="header-wrapper">
    <a class="brand-logo" href="#Main">
      <img src="./assets/images/logo-central-coffee.png"></a>
    <nav class="header-nav">
      <a href="#About">About</a>
      <a href="#Menu">Menu</a>
      <a href="#Location">Location</a>
    </nav>
    <a id="open-menu" class="open-menu" href="#">
      <span></span>
      <span></span>
      <span></span>
    </a>
  </div>
</header>
<aside id="offcanvas" class="offcanvas">
  <div class="offcanvas-content">
    <a id="close-btn" class="close-btn" href="">
      <span></span>
      <span></span>
    </a>
    <a class="offcanvas-item" href="#About">About</a>
    <a class="offcanvas-item" href="#Menu">Menu</a>
    <a class="offcanvas-item" href="#Location">Location</a>
  </div>
</aside>
<main>
  <section id="Main" class="container">
    <div class="overlay"></div>
    <div class="full-width">
      <hgroup>
        <h1>Central Coffee</h1>
        <h3>Bespoke organically-sourced coffee</h3>
      </hgroup>
    </div>

  </section>
  <section id="About" class="block-wrapper">
    <div class="container">
      <div class="block-content text">
        <h2>About</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis sagittis urna, a fermentum mauris. Mauris sagittis eu urna at sollicitudin. Sed et dui accumsan, vulputate dui ut, fringilla tellus. Vivamus a ex commodo, vulputate metus gravida,
          congue arcu. Fusce vehicula laoreet lorem vel lacinia. Etiam ac erat turpis. Morbi nec urna aliquet, placerat nisl ac, venenatis justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
        <div class="grid-row">
          <div class="image-bg"></div>
          <div class="image-bg"></div>
          <div class="image-bg"></div>
          <div class="image-bg"></div>
        </div>
      </div>
    </div>
  </section>
  <section id="Menu" class="block-wrapper">
    <div class="container">
      <div class="block-content text">
        <h2>Menu</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis sagittis urna, a fermentum mauris. Mauris sagittis eu urna at sollicitudin. Sed et dui accumsan, vulputate dui ut, fringilla tellus. Vivamus a ex commodo, vulputate metus gravida,
          congue arcu. Fusce vehicula laoreet lorem vel lacinia. Etiam ac erat turpis. Morbi nec urna aliquet, placerat nisl ac, venenatis justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div class="grid-row">
          <div class="grid-item">
            <header>DRINKS</header>
            <img src="./assets/images/food-3249174_640.jpg">
            <div>
              <p>La Catalina (Colombia)</p>
              <p>Guarumales (Ecuador)</p>
              <p>Rukondo (Rwanda)</p>
              <p>Peppermint Tea</p>
              <p>Black tea</p>
            </div>
          </div>
          <div class="grid-item">
            <header>FOOD</header>
            <img src="./assets/images/coffee-3297326_640.jpg">
            <div>
              <p>Frittata (Herb and Veggie, Italian, Corned Beef)</p>
              <p>Breakfast sandwich</p>
              <p>Cobb salad</p>
              <p>Various baked goods</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section id="Location" class="block-wrapper">
    <div class="container">
      <div class="block-content text">
        <h2>Location</h2>
        <div class="grid-row">
          <div class="grid-item">
            <img src="./assets/images/map.png" alt="">
          </div>
          <div class="grid-item">
            <header>Hours</header>
            <p>Mon-Thurs -- 7am - 8pm</p>
            <p>Fri-Sun -- 8am - 10pm</p>
          </div>
        </div>

      </div>
    </div>
  </section>
</main>
<footer> @2018 Central Coffee</footer>

关于javascript - 导航到页面的某个部分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50465723/

相关文章:

html - CSS表格列宽不均匀

javascript - 引擎/插件之间的共享功能 Ember

javascript - 无法将可拖动对象放在另一个可放置对象内动态创建的可放置对象上

javascript - 隐藏 html 输入元素,直到加载 javascript

html - 所有字体上升/下降的上方/下方的空间是否相同?

CSS 包装问题

JavaScript 窗口对象元素属性

javascript - 如何在异步测试中对 sinon spy 进行计时

javascript - easyui 根据combobox值填充datagrid数据

javascript - CSS - 使内容在动画背景前面