自動滾動部分的網站

我想通過部分自動滾動，但它只適用於s1和s3。根據我認爲代碼應該如何工作，s3應該跳轉到s2，但它跳轉到s1。車輪事件確實被拿起，我用alert（）檢查;所有其他代碼行都得到執行。這是scrollTop不起作用，可能是因爲佈局，但我不能發現問題。我將不勝感激任何線索。謝謝！自動滾動部分的網站

<div class="header" id="main"> 
    <div class="menu.container" > 
     <span style="font-size:30px;cursor:pointer;margin-right: 2vh;color: 
whitesmoke;" onclick="openOffcanvas();openNav3()">&#9776; </span>   
    </div> 
</div> 

<div class="therest" > 
    <div id="myCanvasNav" class="overlay3" onclick="closeOffcanvas()" 
style="width: 0%; opacity: 0;"></div> 
    <section id="s1" class="section"> 
     <div class="content"> 
      <h1>CompanyX Goes All in With React Native</h1> 
      <h2>Starting in 2018, CompanyX Engine will support React Native. 
</h2> 
      <img src="5.jpg" /> 

     </div>  
    </section> 
    <section id="s2"> 
     <div class="content"> 

     </div> 
    </section> 
    <section id="s3" style="background-color: aqua"> 
     <div class="content"> 

     </div> 
    </section> 


</div> 
<script id="jsbin-javascript"> 
var headerHight = $("main").height(); 
var doWheel = true;  
document.getElementById("s1").addEventListener('wheel', function(e) { 
    e.preventDefault(); 

    if(!doWheel) return; 
    doWheel = false; 

    $('div.therest').animate({ 
    scrollTop: $("#s2").offset().top - headerHight 
    }, 600); 

    setTimeout(turnWheelBackOn,1000); 


}); 
function turnWheelBackOn() { doWheel = true; } 

document.getElementById("s2").addEventListener('wheel', function(e) { 
    e.preventDefault(); 
    if(!doWheel) return; 
    doWheel = false; 

    $('div.therest').animate({ 
    scrollTop: $("#s3").offset().top - headerHight 
    }, 600); 

    setTimeout(turnWheelBackOn, 1000); 

}); 
document.getElementById("s3").addEventListener('wheel', function(e) { 
    e.preventDefault(); 
    if(!doWheel) return; 
    doWheel = false; 

    $('div.therest').animate({ 
    scrollTop: $("#s2").offset().top - headerHight 
    }, 600); 

    setTimeout(turnWheelBackOn, 1000); 

}); 

</script>

來源

2017-09-04 M.K.

此鏈接可能會幫助你：[Autoscroll]（https://stackoverflow.com/questions/8773405/how-to-auto-scroll-to-target-div-with-jquery） –

Kannan K，不完全是：（我不想硬編碼滾動距離 –

我不知道你的CSS設置，但通常我們使用下面的代碼來強制窗口滾動到元素。確保使用html和body來滾動滾動功能。您可以將以下代碼替換爲您的事件。

$("html, body").animate({ 
    scrollTop: $("#s2").offset().top - $(".header").height() //Base on your stcky header, you need to minus the header height 
},1000 /*scroll in ms*/);

編輯：零下收割臺高度爲你

不得動畫上一個div滾動，它不應該工作。

來源

2017-09-04 06:14:54 Samson

謝謝你的答案，但頭是粘性的，所以我必須將scrollTop應用到html的可滾動部分，我認爲滾動的作品，它只是.offset（）.top給出了錯誤的值。 –

這是一個正確的值。我爲你更新了。scrollTop可能不適用於div，但是body/html – Samson

由於頭部粘滯，HTML/body不是可滾動的元素，因此ScrollTop不起作用，最大的可滾動div是position：absolute，這就是爲什麼.offset（）.top不返回正確值的原因，如果我修復它，我會共享一個解決方案。 –

自動滾動部分的網站

回答

相關問題