Javascript 从下到上滚动时，强制fullpage.js滚动到长节的顶部_Javascript_Jquery_Html_Scroll_Fullpage.js

Javascript 从下到上滚动时，强制fullpage.js滚动到长节的顶部

javascript jquery html scroll

Javascript 从下到上滚动时，强制fullpage.js滚动到长节的顶部,javascript,jquery,html,scroll,fullpage.js,Javascript,Jquery,Html,Scroll,Fullpage.js,因此，我已经在我的页面上实现了fullpage.js，除了一件事之外，一切似乎都正常工作：当我从页面底部向上滚动时，页面似乎选择使用部分底部（而不是部分顶部）作为键盘滚动的参考。因为我故意包含了长的部分（比整页长，我想保留）这意味着当我在长的部分下面滚动，然后返回到它们时，显示会落在这些长的部分的下半部分（而不是上半部分）。这是不可取的我的问题是: 1）我确定fullpage.js使用这些幻灯片底部作为从页面底部向上滚动的参考，对吗及 2）你们中有谁知道我可以实现一个修复程序，允许我在

因此，我已经在我的页面上实现了fullpage.js，除了一件事之外，一切似乎都正常工作：

当我从页面底部向上滚动时，页面似乎选择使用部分底部（而不是部分顶部）作为键盘滚动的参考。因为我故意包含了长的部分（比整页长，我想保留）这意味着当我在长的部分下面滚动，然后返回到它们时，显示会落在这些长的部分的下半部分（而不是上半部分）。这是不可取的

我的问题是:

1）我确定fullpage.js使用这些幻灯片底部作为从页面底部向上滚动的参考，对吗

及

2）你们中有谁知道我可以实现一个修复程序，允许我在从下方滚动时，使插件滚动到前一张幻灯片的顶部，而不是将前一部分的底部与屏幕底部对齐

我相信，其他希望保留较长章节的人也可能会遇到这个问题，因此，我和其他人都会非常感谢任何帮助。以下是一份：

这是代码笔：

以下是我的fullpage.js设置：

 $('#fullpage').fullpage({
          sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#1bbc9b', '#4BBFC3', '#7BAABE'],
          scrollBar: true,
          fitToSection:false,
          sectionSelector: 'section',
          scrollingSpeed: 300,
          paddingTop: '100px',
          verticalCentered:true,
          fixedElements: '#headerCont'
       });

这是我的HTML（如果需要，可以在代码笔上看到CSS）：


页
第四节

人
人
人
人
人

人
人
人
人
人


人
人
人
人
人

人
人
人
人
人


人
人
人
人
人

人
人
人
人
人


人
人
人
人
人

人
人
人
人
人


人
人
人
人
人

个人
个人
个人
人
人


人
人
人
人
人

人
人
人
人
人


页脚
页脚B
页脚C

与相关我尝试了该页面上建议的修复，但对我无效，我在此处发布了带有gitHub用户Niklas建议的已编辑文件的版本：。我做错什么了吗？我没有看到任何迹象表明他们更改了任何其他内容或任何其他设置。与此相关，我尝试了该页面上建议的修复，但对我无效，我在此处发布了带有gitHub用户Niklas建议的已编辑文件的版本：。我做错什么了吗？我没有看到任何迹象表明他们改变了任何其他设置。

<html>
<head>
<title>Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
    <article>
<div id = "fullpage">

<div id= "headerCont">
<div id = "header">

<div id="topWrapper"></div>

 <table id="lastRow" class="home">
<tr>
  <td id ="finalCell">
  </td>
</tr>
</table>

</div>
</div>


  <section>


  <h1 class="divider">Section1</h1>
      <div id = "about" class = "mainSub">

      <div id="mainImage" class="imgDiv introCell">
      </div>

      <div id = "nameTitle" class="introCell">

      </div>


      </div>

    </section>

      <section>

      <div id = "previews" class = "mainSub">
      <!-- <section> -->
      <h1 class="divider">Section2</h1>


  <div class="grid bg eCell">
     <div class="gridContent">
          <div class="gridTable">
              <div class="gridTable-cell">
                  Stuff<br>1
              </div>
          </div>
      </div>
  </div>

  <div class="grid bg stemCell">
      <div class="gridContent">
          <div class="gridTable">
              <div class="gridTable-cell stem">
                  Stuff<br>2
              </div>
          </div>
      </div>
  </div>

  <div class="grid bg eCell">
     <div class="gridContent">
          <div class="gridTable">
              <div class="gridTable-cell">
                  Stuff<br>3
              </div>
          </div>
      </div>
  </div>

  <div class="grid bg stemCell">
      <div class="gridContent">
          <div class="gridTable">
              <div class="gridTable-cell stem">
                  Stuff<br>4
              </div>
          </div>
      </div>
  </div>


      </div>


      <!-- </section> -->
    </section>






   <section>
      <div id = "contactDiv" class = "mainSub">
        <!--  <section> -->


        <h1><a name="contact" class="anchor">Section3</a></h1>
        <div id = "contactInfo" class = "contactContentWrapper sectionContentWrapper">


      <div = "phoneDiv" class = "contactMethodDiv">
        <span id="PhoneTitle" class = "contactTitle">Phone:</span><a href="tel:5555555555"><span>555 555 5555 </span></a>
      </div>

      </div>
        <!-- </section> -->
      </div>
    </section>



    <section>

    <div id="staffDiv">
      <h1>Section4</h1>
      <ul id ="staffPlural">
        <li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div>
        </li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff">
          <span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person
          </div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div>
          </li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li>
      </ul>

    </div>


    <div id="staffDiv">
      <ul id ="staffPlural">
        <li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div>
        </li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff">
          <span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person
          </div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div>
          </li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li>
      </ul>

    </div>

    <div id="staffDiv">
      <ul id ="staffPlural">
        <li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div>
        </li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff">
          <span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person
          </div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div>
          </li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li>
      </ul>

    </div>

    <div id="staffDiv">
      <ul id ="staffPlural">
        <li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div>
        </li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff">
          <span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person
          </div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div>
          </li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li>
      </ul>

    </div>
    <div id="staffDiv">
      <ul id ="staffPlural">
        <li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div>
        </li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff">
          <span class="tf"></span><div class="tf2">persond</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person
          </div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div>
          </li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li>
      </ul>

    </div>


    <div id="staffDiv">

      <ul id ="staffPlural">
        <li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div>
        </li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff">
          <span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person
          </div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div>
          </li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li>
      </ul>

    </div>


    </section>


    <section id="footerSection">
    <div id = "eFooter" class = "footer areaSub">
      <div id = "eFooterContentWrapper" class = "footerContentWrapper sectionContentWrapper">

    <ul id="eFooterList" class ="footerList">
        <li><a>footerA</a></li>
        <li><a>footerB</a></li>
        <li><a>footerC</a></li>
    </ul>

    </div>
    </div>
  </section>









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