平滑滾動錨鏈接沒有jQuery

是否可以使用平滑滾動來錨鏈接，但沒有jQuery？我正在創建一個新網站，我不想使用jQuery。平滑滾動錨鏈接沒有jQuery

2013-07-18 drozdzynski

@SLaks 25％？哈！是啊... – Ian

我嘗試過使用純js，但是它給了混蛋 –

jquery包含了很多無用的代碼，你永遠不會使用所有jquery的50％，所以去香草JS或者只從jquery得到你需要的東西 – sbaaaang

從這裏使用功能：JavaScript animation並修改它來修改屬性（不只是一個風格的屬性），你可以嘗試這樣的事：

function animate(elem, style, unit, from, to, time, prop) { 
    if (!elem) { 
     return; 
    } 
    var start = new Date().getTime(), 
     timer = setInterval(function() { 
      var step = Math.min(1, (new Date().getTime() - start)/time); 
      if (prop) { 
       elem[style] = (from + step * (to - from))+unit; 
      } else { 
       elem.style[style] = (from + step * (to - from))+unit; 
      } 
      if (step === 1) { 
       clearInterval(timer); 
      } 
     }, 25); 
    if (prop) { 
      elem[style] = from+unit; 
    } else { 
      elem.style[style] = from+unit; 
    } 
} 

window.onload = function() { 
    var target = document.getElementById("div5"); 
    animate(document.scrollingElement || document.documentElement, "scrollTop", "", 0, target.offsetTop, 2000, true); 
};

DEMO：https://jsfiddle.net/zpu16nen/

製作當然，你確定窗口的大小足夠小，所以實際上有一個滾動條，並且可以滾動到第5個div。

不，不需要重新創建25％的jQuery。

這顯然需要高度修改，具體取決於你的問題實際上意味着什麼（比如當窗口哈希改變時，或類似的東西）。

注意與jQuery，它是那麼容易，因爲：

$(document).ready(function() { 
    $("html, body").animate({ 
     scrollTop: $("#div5").offset().top 
    }, 2000); 
});

DEMO：http://jsfiddle.net/7TAa2/1/

只是說...

來源

2013-07-18 20:31:48 Ian

對於那些試圖解決這個問題的人來說：這是一個很棒的腳本，但不要指望任何緩動或好的補間。這是一種生動的動畫。 –

類似的嘗試：http://stackoverflow.com/questions/10063380/javascript-smooth-scroll-without-the-use-of-jquery＆http://stackoverflow.com/questions/8917921/cross-browser-javascript-不是jquery-scroll-to-top-animation –

在firefox中不能工作（不再？） – mtness

與:target選擇CSS3過渡可以提供一個很好的結果沒有任何JS黑客入侵。我只是在考慮是否要實現這一點，但如果沒有Jquery，它會變得有點混亂。詳情請參閱this question。

來源

2014-04-30 14:59:09

擴展這樣的回答：https://stackoverflow.com/a/8918062/3851798

定義你的scrollTo的功能後，你可以通過你想scrollTo在功能的元件。

function scrollTo(element, to, duration) { 
    if (duration <= 0) return; 
    var difference = to - element.scrollTop; 
    var perTick = difference/duration * 10; 

    setTimeout(function() { 
     element.scrollTop = element.scrollTop + perTick; 
     if (element.scrollTop === to) return; 
     scrollTo(element, to, duration - 10); 
    }, 10); 
}

如果你有一個id = 「頁腳」

<div id="footer" class="categories">…</div>

在您運行滾動，你可以運行此腳本一個div，

elmnt = document.getElementById("footer"); 
scrollTo(document.body, elmnt.offsetTop, 600);

有你有它。平滑滾動沒有jQuery。您實際上可以在瀏覽器的控制檯上播放該代碼並根據自己的喜好進行微調。

來源

2015-08-13 11:45:58

到目前爲止最好的答案。清潔和可擴展。謝謝！ –

不要忘記用'duration <= 0'而不是'duration <0'（第2行）來修復它。 – julesbou

完美。簡短而甜蜜，完成它。謝謝@Tejas Shah –

你可以使用這個javascript庫來平滑滾動到你的所有內部鏈接。您也可以添加配置，以提供要忽略的鏈接。您可能會在這裏查看詳細信息。 https://codingninjascodes.github.io/SmoothScrollJs/

來源

2016-09-20 06:07:33 user3147343

純輕量級的JavaScript庫：smooth-scroll on github

來源

2017-11-02 00:47:04

其實，有更輕便和簡單的方式做到這一點： https://codepen.io/ugg0t/pen/mqBBBY

function scrollTo(element) { 
 
    window.scroll({ 
 
    behavior: 'smooth', 
 
    left: 0, 
 
    top: element.offsetTop 
 
    }); 
 
} 
 

 
document.getElementById("button").addEventListener('click',() => { 
 
    scrollTo(document.getElementById("8")); 
 
});

div { 
 
    width: 100%; 
 
    height: 200px; 
 
    background-color: black; 
 
} 
 

 
div:nth-child(odd) { 
 
    background-color: white; 
 
} 
 

 
button { 
 
    position: absolute; 
 
    left: 10px; 
 
    top: 10px; 
 
}

<div id="1"></div> 
 
<div id="2"></div> 
 
<div id="3"></div> 
 
<div id="4"></div> 
 
<div id="5"></div> 
 
<div id="6"></div> 
 
<div id="7"></div> 
 
<div id="8"></div> 
 
<div id="9"></div> 
 
<div id="10"></div> 
 
<button id="button">Button</button>

來源

2017-11-16 05:03:29

唯一的問題是，不是''element.offsetTop''而是''element.getBoundingClientRect（）。 + window.scrollY'' – Braggae

使用此：

let element = document.getElementById("box"); 

element.scrollIntoView(); 
element.scrollIntoView(false); 
element.scrollIntoView({block: "end"}); 
element.scrollIntoView({behavior: "instant", block: "end", inline: "nearest"});

DEMO：https://jsfiddle.net/anderpo/x8ucc5ak/1/

來源

2018-01-30 09:31:44 Anderpo

嘗試添加一些解釋 –

解釋：https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView#Browser_compatibility –

非常有趣的解決方案（+1），但不是在目前的IE惡臭支持！ –

我最喜歡的滾動圖書館目前Zenscroll因爲wide range of features和小尺寸（目前僅3.17kb）的。

未來，使用本地scrollIntoView功能可能會更有意義，但由於缺乏IE支持，現在大多數生產站點都必須進行多填充，所以我建議在所有情況下都使用Zenscroll。

來源

2018-02-21 12:32:45

平滑滾動錨鏈接沒有jQuery

回答

相關問題