个人中心
gpt4 book ai didi

javascript - 按下导航链接时如何平滑滚动？

转载 作者：行者123 更新时间：2023-11-28 03:23:32 25 4
gpt4 key购买 nike

我的导航栏中有 3 个链接，每当按下它们时，我都希望可以平滑地滚动到页面上它们的区域。我已经设置了 anchor ，但我没有任何脚本编写经验，所以我需要实际平滑滚动方面的帮助。你们谁能告诉我我需要做什么？我还在这里创建了一个 JSFIDDLE:https://jsfiddle.net/d9oxdxbo/

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
    <title>
    </title>
  </head>
  <body>
    <!-- Navigation Bar -->
    <ul>
      <li>
        <a href="test_webpage.html#about">ABOUT
        </a>
      </li>
      <li>
        <a href="test_webpage.html#coupons">COUPONS
        </a>
      </li>
      <li>
        <a href="test_webpage.html#feedback">FEEDBACK
        </a>
      </li>
    </ul>
    <img src="https://preview.ibb.co/dr3y7v/vintage.png" height="660px" width="100%">
    <h2>
      <span style="background-color: rgba(26, 102, 255, 0.75)">BRINGING YOU CONVENIENCE
      </span>
    </h2>
    <h3>
      <span style="background-color: rgba(26, 102, 255, 0.75)">SINCE THE 2000's
      </span>
    </h3>
    <div id='about'>
      <a id="about" name='about'>
        <div id='opaque'>
          <img src="https://preview.ibb.co/bS5nja/gas_station_hero_image.jpg" height="680px" width="100%">
        </div>
        <h4>WHO WE ARE
        </h4>
        <div id='divp2'> 
          <p>WE ARE A SMALL CONVENIENCE STORE LOCATED IN THE HEART OF CARY, NORTH CAROLINA. WE SPECIALIZE IN CRAFT BEER AND EXQUISITE WINE. WE HAVE ALL YOUR QUICK GROCERY NEEDS. WE HAVE THE BEST PRICES IN OUR AREA GUARANTEED! COME VISIT US FOR A TRULY ENLIGHTENING EXPERIENCE! WE ARE ON GOOGLE SO IF YOU WANT TO SEE OUR REVIEWS OR GIVE US ONE, YOU CAN!
          </p>
        </div>
        <div id='divp'>
          <p>YOU MIGHT BE WONDERING, WHY SHOULD I COME HERE? WHAT MAKES THIS GAS STATION DIFFERENT FROM OTHER GAS STATIONS? WELL, WITH EXCELLENT STAFF, LOW PRICES, AND CLEAN FLOORS, THE BETTER QUESTION SHOULD BE, WHY SHOULDN'T I COME HERE! WE HOPE YOU COME TO OUR STORE AND HAVE A FABULOUS EXPERIENCE. IF YOU DO EXPERIENCE ANY DIFFICULTIES DURING YOUR TIME HERE, PLEASE FEEL FREE TO CONTACT THE MANAGER. HE WILL RESOLVE YOUR COMPLAINTS IN NO TIME!
          </p>
        </div>
      </a>
    </div>
    <div id='coupons'>
      <a id="coupons" name='coupons'>
        <div style="float:left">  
          <img id='myImg' src="https://preview.ibb.co/jBYUxv/coupon1.png" id="i1" height="300px" width="600px">
          <div id="myModal" class="modal">
            <span class="close">×
            </span>
            <img class="modal-content" id="img01">
            <div id="caption">
            </div>
          </div>
        </div>      
        <div id='pformat'>
          <p>COUPONS FOR YOU!
          </p>
        </div>
      </a>
    </div>
    <div id='feedback'>
      <a id="feedback" name='feedback'>
      </a>
    </div>
  </body>
</html>

CSS

body {
    margin: 0px;
  }
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: mediumblue;
    font-family: monospace;
    font-size: 15px;
    text-align: center;
    width: 100%;
    top: 0;
  }
  li {
    display: inline-block;
  }
  li a {
    display: block;
    color: white;
    padding: 14px 75px;
    text-decoration: none;
  }
  li a:hover:not(.active) {
    background-color: darkblue;
    font-style: italic;
  }
  img {
    position: relative;
    display: block;
  }
  h2 {
    position: absolute;
    top: 190px;
    text-align: center;
    width: 100%;
    font-size: 65px;
    color: white;
    font-family: sans-serif;
    font-style: italic;
  }
  h3 {
    position: absolute;
    top: 265px;
    text-align: center;
    width: 100%;
    font-size: 65px;
    color: white;
    font-family: sans-serif;
    font-style: italic;
  }
  h4 {
    position: absolute;
    text-align: center;
    font-family: sans-serif;
    font-style: italic;
    width: 100%;
    font-size: 60px;
    top: 700px;
    color: #1A66FF;
  }
  #divp2{
    font-size: 20px;
    font-family: 'hind';
    position: absolute;
    text-align: center;
    margin-left: 150px;
    margin-right: 150px;
    color: #4d4d4d;
    top: 900px;
    margin-left: 150px;
    margin-right: 150px;
    font-weight: 0;
  }
  @font-face {
    font-family: 'hind';
    src: url('C:/Users/lakes/Desktop/hind2.ttf')
  }
  #pformat{
    text-align: center;
    margin-right: 30px;
    font-size: 55px;
    font-family: sans-serif;
    margin-left: 620px;
    position: absolute;
    top: 1450px;
    font-style: italic;
    color: #1A66FF;
    font-weight: bold;
  }
  #opaque {
    opacity: .2;
  }
  #divp {
    font-size: 20px;
    font-family: 'hind';
    position: absolute;
    text-align: center;
    top: 1075px;
    margin-left: 150px;
    margin-right: 150px;
    color: #4d4d4d;
  }
  #myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
  }
  #myImg:hover {
    opacity: 0.7;
  }
  /* The Modal (background) */
  .modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 1;
    /* Sit on top */
    padding-top: 100px;
    /* Location of the box */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0,0,0);
    /* Fallback color */
    background-color: rgba(0,0,0,0.9);
    /* Black w/ opacity */
  }
  /* Modal Content (image) */
  .modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
  }
  /* Caption of Modal Image */
  #caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
  }
  /* Add Animation */
  .modal-content, #caption {
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
  }
  @-webkit-keyframes zoom {
    from {
      -webkit-transform: scale(0)}
    to {
      -webkit-transform: scale(1)}
  }
  @keyframes zoom {
    from {
      transform: scale(0.1)}
    to {
      transform: scale(1)}
  }
  /* The Close Button */
  .close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
  }
  .close:hover,
  .close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
  }
  /* 100% Image Width on Smaller Screens */
  @media only screen and (max-width: 700px){
    .modal-content {
      width: 100%;
    }
  }

JS

  // Get the modal
          var modal = document.getElementById('myModal');
          // Get the image and insert it inside the modal - use its "alt" text as a caption
          var img = document.getElementById('myImg');
          var modalImg = document.getElementById("img01");
          img.onclick = function(){
            modal.style.display = "block";
            modalImg.src = this.src;
          }
          // Get the <span> element that closes the modal
          var span = document.getElementsByClassName("close")[0];
          // When the user clicks on <span> (x), close the modal
          span.onclick = function() {
            modal.style.display = "none";
          }

最佳答案

用你的 anchor 标签试试这个

<script type="text/javascript">
$(document).ready(function() {
$('a'). Click(function(e) {
    e.preventDefault();
    $('html, body').animate({
        scrollTop: $('the link div').offset().top}, 'slow'); 
});
});
</script>

关于javascript - 按下导航链接时如何平滑滚动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45107833/

25 4 0
文章推荐： html - CSS:为什么我的 HTML 元素以某种方式相对定位？
文章推荐： c++ - 尝试在 Qt 中继承 QLCDNumber 的问题
文章推荐： c++ - 自制维吉尼亚密码；使用 ascii 字符操作
文章推荐： javascript - 从react.js 中的Express.js API 获取数据。 postman 的请求正在运行
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com