如何滾動到頁面上的特定div滾動？

我有一個頁面，有四個垂直堆疊的主要div。我需要滾動它應該直接在div之間移動而不是正常滾動。如何滾動到頁面上的特定div滾動？

我正在使用ScrollTo插件功能，但它不能正常工作，因爲我必須對滾動進行所有操作，但在插件示例中它使用按鈕。

任何人有任何想法我可以做到這一點？

我想要一個類似於此頁面的行爲。

enter

http://jsfiddle.net/jLG7W/

來源

2014-02-21 Deepak Kumar Padhy

您鏈接到作爲你的例子似乎使用fullPage.js jQuery插件網站。這是我猜你會在之後。

編輯：

爲了得到這個工作，沒有任何插件也許嘗試這樣的事情

var divs = ["first","second","third","fourth"]; 
var counter = 0; 

document.addEventListener("mousewheel", function(e) { 

    if(e.wheelDelta > 0){ // up 
     if(counter > 0){ 
      counter--; 
      document.getElementById(divs[counter+1]).style.display = "none"; 
      document.getElementById(divs[counter]).style.display = "block"; 
     } 
    } 
    else if(e.wheelDelta < 0){ // down 

     if(counter < (divs.length-1)){   
      counter++; 
      document.getElementById(divs[counter-1]).style.display = "none"; 
      document.getElementById(divs[counter]).style.display = "block"; 
     } 
    } 

});

演示：http://jsfiddle.net/jLG7W/1/

來源

2014-02-21 10:42:51 Carl

我不能不使用任何插件手動執行它嗎？ –

@DeepakKumarPadhy當然可以。 – George

是的，雖然你可能需要寫更多的代碼。通過它的外觀，代碼正在工作（在基本意義上），一次只有一個div可見，然後使用鼠標滾輪事件觸發切換顯示哪個div。 – Carl

如果你想觸發滾動功能，當你真正滾動鼠標滾輪，不僅使用鍵盤箭頭，那麼你應該嘗試閱讀this.

我做了簡單的演示here in JSFiddle。

if (window.addEventListener) { 
    // IE9, Chrome, Safari, Opera 
    window.addEventListener("mousewheel", MouseWheelHandler, false); 
    // Firefox 
    window.addEventListener("DOMMouseScroll", MouseWheelHandler, false); 
} 
// IE 6/7/8 
else window.attachEvent("onmousewheel", MouseWheelHandler); 


function MouseWheelHandler(e) { 

    // cross-browser wheel delta 
    var e = window.event || e; // old IE support 
    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))); 

    // Replace this IF statement with your code 
    if(delta==-1){ 
     // Go to next slide 
    }else{ 
     // Go to previous slide 
    } 


    return false; 
}

來源

2014-02-21 11:04:58

如何滾動到頁面上的特定div滾動？

回答

相關問題