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

【问题标题】：Move from a <div> to another <div> on scroll滚动时从一个 <div> 移动到另一个 <div>
【发布时间】：2016-11-05 18:14:38
【问题描述】：

我希望我的#logo-page div 在滚动时以及单击 FontAwesome 图标时平滑地移动到 #content div。如何使用 jQuery 做到这一点？

<div class="english-container" id="logo-page">
    <div class="title">
        <h1>Mean Design.</h1>
        <img class="img-responsive" id="logo" src="MeanDesignLogo.png">
        <h3>ui/ux • web design • graphic design • illustration</h3>
    </div> <!-- title -->
    <i class="fa fa-arrow-circle-down fa-3x" aria-hidden="true"></i>
</div>
<div class="english-container" ></div>

【问题讨论】：

Moving from one div to another on click of a menu link的可能重复

标签： javascript jquery html css scroll

【解决方案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

这是第二个demo的例子：

$(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>

【讨论】：

【解决方案2】：

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

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

如果您想滚动到 id 名称为“任务”的 div，这将有所帮助

【讨论】：

【解决方案3】：

您可以使用以下代码在单击.fa-arrow-circle-down 时平滑滚动到#logo-page div：

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

【讨论】：