堆栈内存溢出
  繁体   English   中英

如何使用 jQuery 滚动到特定元素？

[英]How do I use jQuery to scroll to a specific element?

 原文  2020-03-05 03:58:29  3   1    javascript/ jquery/ html

问题描述

 <!--jQuery--> $(document).ready(function() { $("#work-btn").hover(function() { $('.fa-caret-right').toggleClass('flip'); }); $("#work-btn").click(function(){ $('html, body').animate({ scrollTop: $("#about-container").offset().top }, 500); }); })
 <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <link href="./index.css" type="text/css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="./index.js"></script> </head> <body> <div class="row text-center web d-flex" id="home"> <!-- <img src="./jumbotron.jpg" id="home-img-web">--> <div class="col introduction flex-grow-1"> <h1>Hello, I'm a front end web developer.</h1> <div class="row"> <div class="col mt-2 work-btn"> <a href="#"> <button id="work-btn">View my work <i class="fa fa-caret-right"></i></button> </a> </div> </div> </div> </div> <div class="row text-center mobile d-flex" id="home"> <!-- <img src="./jumbotron-mobile.jpg" class="flex-grow-1">--> <div class="col introduction flex-grow-1"> <h1>Hello, I'm a front end web developer.</h1> <div class="row"> <div class="col"> <a href=""> <button id="work-btn-mobile">View my work <i class="fa fa-caret-right"></i></button></a> </div> </div> </div> </div> <!--Navbar - Start --> <header class="sticky-top"> <nav class="navbar navbar-expand-lg navbar-light"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav text-center"> <li class="nav-item active"> <a class="nav-link" href="#home">HOME <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#about">ABOUT</a> </li> <li class="nav-item"> <a class="nav-link" href="#portfolio">PORTFOLIO</a> </li> <li class="nav-item"> <a class="nav-link" href="#contact">CONTACT</a> </li> </ul> </div> </nav> </header> <!-- Navbar - End --> <div class="about-container" id="about-container"> <div class="row text-center my-4 py-5" id="about"> <div class="col"> <div id="about" class="header-div mx-auto d-flex justify-content-center"> <h2>ABOUT</h2> </div> </div> </div> <div class="container"> <div class="row text-center"> <div class="col-6 col-md"> <img src="./hex-1.jpg" class="about-icon"> <h4 class="pt-2">Fast</h4> <p><span>Lorem ipsum dolor sit amet consectetur.</span> <br>Lorem ipsum dolor sit amet.</p> </div> <div class="col-6 col-md"> <img src="./hex-2.jpg" class="about-icon"> <h4 class="pt-2">Responsive</h4> <p><span>Lorem ipsum dolor sit amet consectetur.</span> <br>Lorem ipsum dolor sit amet.</p> </div> <div class="col-6 col-md"> <img src="./hex-3.jpg" class="about-icon"> <h4 class="pt-2">Intuitive</h4> <p><span>Lorem ipsum dolor sit amet consectetur.</span> <br>Lorem ipsum dolor sit amet.</p> </div> <div class="col-6 col-md"> <img src="./hex-4.jpg" class="about-icon"> <h4 class="pt-2">Dynamic</h4> <p><span>Lorem ipsum dolor sit amet consectetur.</span> <br>Lorem ipsum dolor sit amet.</p> </div> </div> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> </body> </html>

我已经在这里尝试了至少 7 个类似问题的问题，但没有一个对我想要做的事情有效。 我不确定我在这里做错了什么，所以希望不同的眼睛可以将我指向正确的方向。 我正在尝试在 jQuery 中单击时为所需元素创建滚动动画。 当我单击它时，它会跳转到元素而不是平滑滚动，这是我想要的结果。

<html>
<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" 
    integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <link href="./index.css" type="text/css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="./index.js"></script>
</head>
<body>
  <div class="row text-center web d-flex" id="home">
  <!--  <img src="./jumbotron.jpg" id="home-img-web">-->
    <div class="col introduction flex-grow-1">
      <h1>Hello, I'm a front end web developer.</h1>
        <div class="row">
          <div class="col mt-2 work-btn">
            <a href="#">
              <button id="work-btn">View my work <i class="fa fa-caret-right"></i></button>
            </a>
          </div>
        </div>
    </div>
  </div>

  <div class="row text-center mobile d-flex" id="home">
  <!--  <img src="./jumbotron-mobile.jpg" class="flex-grow-1">-->
    <div class="col introduction flex-grow-1">
      <h1>Hello, I'm a front end web developer.</h1>
        <div class="row">
          <div class="col">
            <a href="">
<button id="work-btn-mobile">View my work <i class="fa fa-caret-right"></i></button></a>
          </div>
        </div>
    </div>
  </div>

<!--Navbar - Start -->
  <header class="sticky-top">
    <nav class="navbar navbar-expand-lg navbar-light">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav text-center">
          <li class="nav-item active">
            <a class="nav-link" href="#home">HOME <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#about">ABOUT</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#portfolio">PORTFOLIO</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#contact">CONTACT</a>
          </li>
        </ul>
      </div>
    </nav>
  </header>
  <!-- Navbar - End -->
    <div class="about-container" id="about-container">
      <div class="row text-center my-4 py-5" id="about">
        <div class="col">
          <div id="about" class="header-div mx-auto d-flex justify-content-center">
            <h2>ABOUT</h2>
          </div>
        </div>
      </div>
      <div class="container">
        <div class="row text-center">
            <div class="col-6 col-md">
              <img src="./hex-1.jpg" class="about-icon">
              <h4 class="pt-2">Fast</h4>
              <p><span>Lorem ipsum dolor sit amet consectetur.</span>
                <br>Lorem ipsum dolor sit amet.</p>
            </div>
            <div class="col-6 col-md">
              <img src="./hex-2.jpg" class="about-icon">
              <h4 class="pt-2">Responsive</h4>
              <p><span>Lorem ipsum dolor sit amet consectetur.</span>
                <br>Lorem ipsum dolor sit amet.</p>
            </div>
            <div class="col-6 col-md">
              <img src="./hex-3.jpg" class="about-icon">
              <h4 class="pt-2">Intuitive</h4>
              <p><span>Lorem ipsum dolor sit amet consectetur.</span>
                <br>Lorem ipsum dolor sit amet.</p>
            </div>
            <div class="col-6 col-md">
              <img src="./hex-4.jpg" class="about-icon">
              <h4 class="pt-2">Dynamic</h4>
              <p><span>Lorem ipsum dolor sit amet consectetur.</span>
                <br>Lorem ipsum dolor sit amet.</p>
            </div>
          </div>

 <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

</body>
</html>

<!--jQuery-->
$(document).ready(function() {
    $("#work-btn").hover(function() {
       $('.fa-caret-right').toggleClass('flip');
    });
    $("#work-btn").click(function(){            
        $('html, body').animate({
                scrollTop: $("#about-container").offset().top
            }, 500);
    });
})

1 个解决方案

解决方案1
 0  2020-03-05 04:19:38

您可以使用持续时间编号进行游戏。 为了测试滚动速度，您可以尝试5000而不是500 。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何使用jQuery使元素滚动到视图中？ 如何使用jquery滚动到新添加的列表元素 如何使用jQuery / JS将列表框滚动到顶部 如何使用jQuery滚动来更改元素的高度？ 我怎么能做jQuery不适用于特定元素？ 如何使用 jQuery 查找元素是否包含特定类？ 如何在Jquery中选择html元素的特定实例？ 如何使用 jQuery 将文本添加到特定的 div 元素？ 如何使用jQuery选择具有特定子元素的元素？ 如何在jQuery中将函数添加到特定元素类型？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM