49 lines
1.6 KiB
HTML
49 lines
1.6 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
</head>
|
|
<body>
|
|
<h1>Quick and dirty scrollTo(x, y, { behavior: 'smooth' }) testing</h1>
|
|
<p style='height: 500px'>For real. Really quick. Really dirty.</p>
|
|
<h2 id='scrollIntoView'>A second after pageload, you should be smoothly scrolled to my neighborhood</h2>
|
|
<p style='height: 500px'>Welcome to the neighborhood.</p>
|
|
<h2>Eventually this will be scrolled to</h2>
|
|
<p style='height: 500px'>Well, maybe I was lying.</p>
|
|
|
|
<script src="smoothscroll.js"></script>
|
|
<script>
|
|
var T = 2000;
|
|
document.addEventListener('DOMContentLoaded', function(e) { setTimeout(function() {
|
|
console.log('scrollTo 0, 300');
|
|
window.scrollTo(0, 300, { behavior: 'smooth' });
|
|
|
|
setTimeout(function() {
|
|
console.log('scrollTo 0, 600');
|
|
window.scrollTo(0, 1200, { behavior: 'smooth' });
|
|
}, 150);
|
|
|
|
setTimeout(function() {
|
|
|
|
console.log('#scrollIntoView toTop');
|
|
document.getElementById('scrollIntoView')
|
|
.scrollIntoView(true, { behavior: 'smooth' }); setTimeout(function() {
|
|
|
|
console.log('scrollTo 0, 0');
|
|
window.scrollTo(0, 0, { behavior: 'smooth' }); setTimeout(function() {
|
|
|
|
console.log('#scrollIntoView toBottom');
|
|
document.getElementById('scrollIntoView')
|
|
.scrollIntoView(false, { behavior: 'smooth' }); setTimeout(function() {
|
|
|
|
console.log('scrollBy 0 400');
|
|
window.scrollBy(0, 400, { behavior: 'smooth' }); setTimeout(function() {
|
|
|
|
console.log('scrollBy 0 -400');
|
|
window.scrollBy(0, -400, { behavior: 'smooth' });
|
|
|
|
}, T); }, T); }, T); }, T); }, T); }, T); }
|
|
, false);
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|