滾動使用純JS

Question

純JS內的DIV（不窗口）的位置只能拜託 - NO JQUERY

我有溢出滾動一個div，窗口（HTML /機構）從未溢出本身。

我有一個錨鏈接的列表，並希望滾動到一個位置，當他們被點擊。

基本上只是尋找從一個div，而不是窗口錨點滾動。

window.scrollTo等不工作，因爲窗口實際上並沒有溢出。

簡單的測試用例http://codepen.io/mildrenben/pen/RPyzqm

JADE

nav 
    a(data-goto="#1") 1 
    a(data-goto="#2") 2 
    a(data-goto="#3") 3 
    a(data-goto="#4") 4 
    a(data-goto="#5") 5 
    a(data-goto="#6") 6 

main 
    p(data-id="1") 1 
    p(data-id="2") 2 
    p(data-id="3") 3 
    p(data-id="4") 4 
    p(data-id="5") 5 
    p(data-id="6") 6 

SCSS

html, body { 
    width: 100%; 
    height: 100%; 
    max-height: 100%; 
} 

main { 
    height: 100%; 
    max-height: 100%; 
    overflow: scroll; 
    width: 500px; 
} 

nav { 
    background: red; 
    color: white; 
    position: fixed; 
    width: 50%; 
    left: 50%; 
} 

a { 
    color: white; 
    cursor: pointer; 
    display: block; 
    padding: 10px 20px; 
    &:hover { 
    background: lighten(red, 20%); 
    } 
} 

p { 
    width: 400px; 
    height: 400px; 
    border: solid 2px green; 
    padding: 30px; 
} 

JS

var links = document.querySelectorAll('a'), 
    paras = document.querySelectorAll('p'), 
    main = document.querySelector('main'); 

for (var i = 0; i < links.length; i++) { 
    links[i].addEventListener('click', function(){ 
    var linkID = this.getAttribute('data-goto').slice(1); 
    for (var j = 0; j < links.length; j++) { 
     if(linkID === paras[j].getAttribute('data-id')) { 
     window.scrollTo(0, paras[j].offsetTop); 
     } 
    } 
    }) 
} 

純JS只能拜託 - NO JQUERY

Answer 1

你想要什麼是設置scrollTop property on the <main> element。

var nav = document.querySelector('nav'), 
    main = document.querySelector('main'); 

    nav.addEventListener('click', function(event){ 
    var linkID, 
     scrollTarget; 
    if (event.target.tagName.toUpperCase() === "A") { 
     linkID = event.target.dataset.goto.slice(1); 
     scrollTarget = main.querySelector('[data-id="' + linkID + '"]'); 
     main.scrollTop = scrollTarget.offsetTop; 
    } 
    }); 

你會注意到一些其他的事情我做了不同的：

• 我用event delegation，所以我只需要一個事件附加到nav元素，這將更加有效地處理任何的點擊鏈接。
• 同樣地，而不是通過所有的元素p循環，我所選擇使用attribute selector

這不僅更有效的和可擴展的，它也產生短的一個我想要的，更易於維護的代碼。

此代碼將跳轉到元素，對於動畫滾動，您需要編寫一個函數incrementally updates scrollTop after small delays using setTimeout。

var nav = document.querySelector('nav'), 
    main = document.querySelector('main'), 
    scrollElementTo = (function() { 
     var timerId; 
     return function (scrollWithin, scrollTo, pixelsPerSecond) { 
     scrollWithin.scrollTop = scrollWithin.scrollTop || 0; 
     var pixelsPerTick = pixelsPerSecond/100, 
      destY = scrollTo.offsetTop, 
      direction = scrollWithin.scrollTop < destY ? 1 : -1, 
      doTick = function() { 
      var distLeft = Math.abs(scrollWithin.scrollTop - destY), 
       moveBy = Math.min(pixelsPerTick, distLeft); 
      scrollWithin.scrollTop += moveBy * direction; 
      if (distLeft > 0) { 
       timerId = setTimeout(doTick, 10); 
      } 
      }; 
     clearTimeout(timerId); 
     doTick(); 
     }; 
    }()); 

nav.addEventListener('click', function(event) { 
    var linkID, 
    scrollTarget; 
    if (event.target.tagName.toUpperCase() === "A") { 
    linkID = event.target.dataset.goto.slice(1); 
    scrollTarget = main.querySelector('[data-id="' + linkID + '"]'); 
    scrollElementTo(main, scrollTarget, 500); 
    } 
}); 

你可能有事件代表團的另一個問題是，如果a元素包含子元素和子元素的點擊，這將是事件，而不是a標籤本身的目標。你可以用getParentAnchor function I wrote here之類的東西解決這個問題。

Answer 2

我希望我現在能夠正確地理解這個問題：您有標記，您無法更改（因爲它是通過某種方式生成的，您無法控制），並且希望使用JS爲生成的菜單項添加功能。

我的建議是id和href屬性添加到目標和菜單項分別，就像這樣：

var links = document.querySelectorAll('a'), 
    paras = document.querySelectorAll('p'); 

for (var i = 0; i < links.length; i++) { 
    links[i].href=links[i].getAttribute('data-goto'); 
} 

for (var i = 0; i < paras.length; i++) { 
    paras[i].id=paras[i].getAttribute('data-id'); 
}