jquery - 如何在第二次单击后使图像向下箭头向下滚动到页面末尾。第一次点击没问题

Question

我设置了图像图标并使用了 javascript 和 jquery。图像向下箭头按预期工作，（第一次单击将我带到第二行网格框（向下），现在需要第二次单击将我带到页面底部，但我尝试实现另一组 js 代码但它不起作用，甚至尝试使用 diff 类复制图像，但仍然无法正常工作。

我尝试复制 js 代码和图像代码，但都不起作用。我将箭头图像设置为固定位置。如果同一个图像已经有一个类，那么它如何使用相同的代码也很好奇。

$(function() {
    $('.scroll-down').click (function() {
        $('html, body').animate({scrollTop: $('section.buckets').offset().top }, 'slow');
      return false;
    });

    /* $('section.buckets').click (function() {
        $('html, body').animate({scrollTop: $('section.more').offset().top }, 'slow');
        return false;
    });  this is the second code is tried to implement doesnt work*/
}); 

<!--Here is the img tied to down arrow icon-->
<a href="#" class="scroll-down" address="true"><i class="fa fa-angle-down" aria-hidden="true"></i></a>

<!--CSS-->
.down {
position: fixed;
top: 93%;
left: 97%;
transform: translate(-50%, -50%);
width: 60px;
height: 60px;
border-radius: 50%;
font-size:48px;
border: 2px solid #00567d;
background: #04a9f5;
box-shadow: 0 0 0 5px #fff; 0 5px 25px rgba(0,0,0,.8);
overflow: hidden;
}

.down:before {
content: '';
position: absolute;
width: 50%;
height: 100%;
background: rgba(0,0,0,.1);

}

.down .fa {
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
transform: translate(-50%, -50%);
animation: animate 3s linear infinite;
text-shadow: 0 2px 5px rgba(0,0,0,.2);

}

@keyframes animate {
0% {
    top: -10%;
} 
40% {
    top: 60%;
} 
60% {
    top: 30%;
} 
80% {
    top: 60%;
} 
100% {
    top: 110%;
} 
}

/* Buckets section */

.buckets {
padding: 2em 1em 1em;
background: #3E454C;

}

.buckets ul {
margin: 0;
padding: 0;
}

.buckets li {
margin-bottom: 1em;
background: white;
list-style-type: none;
}

.bucket {
padding: 1.5em;
}

/* More section */

.more {
padding: 2em;
}

/*--------------------------------------------------------------
Use flex to create a three-bucket layout
--------------------------------------------------------------*/

@media screen and (min-width: 700px) {
@supports (display: flex) {

    .buckets ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: stretch;

    }

    .buckets li {
        width: 31%;
    }

}
}

<!--HTML-->
<section class="buckets">
<ul>
  <li>
    <img src="./images/image1.png" alt="">
      <div class="bucket">
    <h3 class="bucket-title">headline1</h3>
    <p>paragraph1</p>
    </div><!-- .bucket -->                        </li>
  <li>
    <img src="./images/image2.png" alt="">
    <div class="bucket">                
        <h3 class="bucket-title">headline2</h3>
    <p>paragraph2</p>                               
    </div><!-- .bucket -->                                      
  </li>
  <li>
   <img src="./images/image3.png" alt="">
   <div class="bucket">
    <h3 class="bucket-title">headline3</h3>
            <p>paragraph3</p>                   
   </div><!-- .bucket -->           
  </li>
  </ul>                         
</section><!-- .buckets -->     

<section class="more">
   <div class="more-content">
     <h4 class="content-title">moretitle</h4>
     <button><a href="page.html">Learn More</a></button>
 </div><!-- .more-content -->
</section><!-- .more -->  

当我现在单击向下箭头图标时，它按预期工作，将我向下带到第二行网格框，但我不知道如何实现第二次单击的代码以将我带到页面底部，然后第三次单击到用向上箭头而不是向下箭头带我回去。

标签： jqueryhtml

Answer 1

$(function() {


    function determineScrollTarget()
    {
      var currentPos = $(window).scrollTop();
      
      //Add whatever stops you want to scroll to here.
      //Be sure to always order them from the top of the page to the bottom.
      var positions = [
        $('.content1').offset().top,
        $('.content2').offset().top,
        //Add new elements here.
        $(document).height() - $(window).height(), //Bottom of page
      ];
      
      
      var targetScrollPosition = 0;
      //Find the first position on the list that is lower than the current scroll position.
      for (var i = 0; i < positions.length; i++)
      {
        if (positions[i] > currentPos) 
        {
          targetScrollPosition = positions[i];
          break;
        }
       
      }
      
      return targetScrollPosition;
    }

    $('.arrow').click(function(e){
        e.preventDefault();
        $('html, body').animate({scrollTop: determineScrollTarget() }, 'slow');
    });
}); 

.page
{
height: 1000px;
}


.content1
{
background: red;
margin-top:10em;
height: 10em;
margin-bottom: 70em;
}

.content2
{
background: blue;
margin-top:50em;
height: 10em;
margin-bottom: 10em;
}

.content3
{
background: teal;
margin-top:50em;
height: 10em;
margin-bottom: 10em;
}

.arrow
{
  position: fixed;
  right: 30px;
  top: 30px;
  border: 1px solid black;
  background: #EEE;
  padding: 10px;
  cursor: pointer;
 
}

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="page">

<a class="arrow">Press Me \/</a>

<div class="content1">
<h1>Content 1</h1>
</div>

<div class="content2">
<h1>Content 2</h1>
</div>

<div class="content3">
<h1>Content 3</h1>
</div>

</div>
</body>
</html>