Question

我想让我的#logo-page div在滚动时顺利移动到#content div，并且当点击FontAwesome图标时也是如此。我如何使用jQuery做到这一点？

{{1}}

Answer 1

我在这个页面上找到了如何做到这一点的技巧： https://css-tricks.com/snippets/jquery/smooth-scrolling/

以下是两个演示：

https://css-tricks.com/examples/SmoothPageScroll/ http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate_smoothscroll

这是第二个演示的示例：

$(document).ready(function(){
  // Add smooth scrolling to all links
  $("a").on('click', function(event) {

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){
   
        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });
});

body, html, .main {
    height: 100%;
}

section {
    min-height: 100%;
}

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>

<a href="#section2">Click Me to Smooth Scroll to Section 2 Below</a>

<div class="main">
  <section></section>
</div>

<div class="main" id="section2">
  <section style="background-color:blue"></section>
</div>

</body>
</html>

Answer 2

你们完全忽略了他的问题。他的问题是，他想在滚动而不是点击时从一个div滚动到另一个div。

window.addEventListener('scroll', () => {
     document.querySelector('#mission').scrollIntoView({
         behavior: 'smooth'
     });
})

如果要滚动到ID名称为“ mission”的div，这将很有帮助

Answer 3

点击#logo-page后，您可以使用以下代码顺畅滚动到.fa-arrow-circle-down div：

$(".fa-arrow-circle-down").on("click", function(e){
  $("html, body").animate({'scrollTop': $("#logo-page").offset().top }, 1000 );
});//click

滚动时从<div>移动到另一个<div>

3 个答案: