单击锚定链接（例如fullpage.js）时快速滚动

Question

I have a page that is split into two columns. first column is fixed, the 2nd column vertical scrolls. Currently, when you click on a link to go to the 2nd column, it will smooth scroll to that anchor.

What I'm trying to do is this: when a user tries to scroll, it will let them scroll, so currently they can basically scroll to the in-between section of anchor 1 and 2. I want it so if the user scrolls, it's as if they clicked the link and it goes entirely to the 2nd anchor. If the user scrolls up, then it goes entirely to the 1st anchor and there's no way they can get into the in-between part of it.

I know that fullpage.js already does this, the problem is that I don't have a lot of control with it. If I could get this working manually, then I can control what happens when I'm on mobile as well. I'm using the code on this page for scrolling:

https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate_smoothscroll

and here's what my page code looks like:

  <a name="#bespoke" id="bespoke"></a>
  <div class="v-image-1" style="height:100%">
    <div class="scroller">

      <div class="row no-margin">
        <div class="col-md-offset-1 col-md-10 no-padding">BESPOKE</div>
        <div class="col-md-1 no-padding"><a href="#targeted"><img src="images/but-scroll.png" alt="scroll" /></a></div>
      </div> 

    </div>
  </div>
<a name="targeted" id="targeted"></a>
<div class="v-image-2">
  <div class="scroller">

    <div class="row no-margin">
      <div class="col-md-offset-1 col-md-10 no-padding">TARGETED</div>
      <div class="col-md-1 no-padding"><a href="#bespoke"><img src="images/but-scroll.png" alt="scroll" /></a></div>
    </div>

  </div>
</div>

Answer 1

I know that fullpage.js already does this, the problem is that I don't have a lot of control with it. If I could get this working manually, then I can control what happens when I'm on mobile as well. I'm using the code on this page for scrolling:

You don't specify why you lack of control. Perhaps if you can tell us what you miss in fullPage.js, we can tell you how to proceed?

fullPage.js has plenty of features, options and callbacks. Within them, you can find multiple responsive options such as responsiveWidth , responsiveHeight and responsiveSlides . Which provides in most cases all you need.