Okay, I am attempting to get a single page (two divs), Primarily a splash screen, which when you click 'Enter site' it will scroll down smoothly to the 'main site', However it jumps to it, rather than smooth scrolling to the element.
How can I get it to scroll to that element smoothly without this jump effect?
Here is my a snippet:
splash = document.getElementById('intro');
content = document.getElementById('content');
function enterSite() {
content.scrollIntoView({
behaviour: "smooth"
});
}body {
font-family: 'Archivo Narrow', sans-serif;
margin: 0 auto;
width: 100%;
height: 100%;
}
html,
body {
overflow: hidden;
}
main {
width: 100%;
height: 100%;
position: relative;
}
#intro {
background-image: url(https://i.imgsafe.org/51d0cf26df.jpg);
background-repeat: no-repeat;
background-size: cover;
display: flex;
text-align: center;
height: 100%;
}
#splash {
margin: auto;
width: 40%;
background-color: rgba(56, 56, 56, 0.4);
border-radius: 50px 50px;
}
#splash-p {
width: 70%;
font-size: 1.2em;
line-height: 1.5em;
margin: auto;
text-align: center;
padding-top: 10px;
color: #fff;
}
.btn {
width: 35%;
margin: auto;
margin-top: 10px;
margin-bottom: 10px;
}
/* Main Content Page */
article {
position: absolute;
width: 100%;
height: 100%;
background-color: red;
}<div id="intro">
<div id="splash">
<p id="splash-p">Just a load of text repeated</p>
<input
type="image"
src="Images/Button.png"
class="btn"
onclick="enterSite()"
/>
</div>
</div>
<article id="content">Just a load of text repeated</article>If you click the button it will jump to the next div, i need it to scroll smoothly, rather than jump to the next div. Using pure javascript, everywhere else i have looked seems to have plug ins or uses jquery.
For a more comprehensive list of methods for smooth scrolling, see my answer here.
To scroll to a certain position in an exact amount of time, window.requestAnimationFrame can be put to use, calculating the appropriate current position each time. setTimeout can be used to a similar effect when requestAnimationFrame is not supported.
/*
@param pos: the y-position to scroll to (in pixels)
@param time: the exact amount of time the scrolling will take (in milliseconds)
*/
function scrollToSmoothly(pos, time) {
var currentPos = window.pageYOffset;
var start = null;
if(time == null) time = 500;
pos = +pos, time = +time;
window.requestAnimationFrame(function step(currentTime) {
start = !start ? currentTime : start;
var progress = currentTime - start;
if (currentPos < pos) {
window.scrollTo(0, ((pos - currentPos) * progress / time) + currentPos);
} else {
window.scrollTo(0, currentPos - ((currentPos - pos) * progress / time));
}
if (progress < time) {
window.requestAnimationFrame(step);
} else {
window.scrollTo(0, pos);
}
});
}
Demo:
function scrollToSmoothly(pos, time) {
var currentPos = window.pageYOffset;
var start = null;
if(time == null) time = 500;
pos = +pos, time = +time;
window.requestAnimationFrame(function step(currentTime) {
start = !start ? currentTime : start;
var progress = currentTime - start;
if (currentPos < pos) {
window.scrollTo(0, ((pos - currentPos) * progress / time) + currentPos);
} else {
window.scrollTo(0, currentPos - ((currentPos - pos) * progress / time));
}
if (progress < time) {
window.requestAnimationFrame(step);
} else {
window.scrollTo(0, pos);
}
});
}
document.getElementById("toElement").addEventListener('click', function(e) {
var elem = document.querySelector("div");
scrollToSmoothly(elem.offsetTop);
});
document.getElementById("toTop").addEventListener('click', function(e){
scrollToSmoothly(0, 700);
});<button id="toElement">Scroll To Element</button>
<div style="margin: 1000px 0px; text-align: center;">Div element
<button id="toTop">Scroll back to top</button>
</div>For more complex cases, the SmoothScroll.js library can be used, which handles smooth scrolling both vertically and horizontally, scrolling inside other container elements, different easing behaviors, scrolling relatively from the current position, and more.
document.getElementById("toElement").addEventListener('click', function(e) {
smoothScroll({toElement: document.querySelector('div'), duration: 500});
});
document.getElementById("toTop").addEventListener('click', function(e){
smoothScroll({yPos: 0, duration: 700});
});<script src="https://cdn.jsdelivr.net/gh/LieutenantPeacock/SmoothScroll@1.2.0/src/smoothscroll.min.js" integrity="sha384-UdJHYJK9eDBy7vML0TvJGlCpvrJhCuOPGTc7tHbA+jHEgCgjWpPbmMvmd/2bzdXU" crossorigin="anonymous"></script>
<button id="toElement">Scroll To Element</button>
<div style="margin: 1000px 0px; text-align: center;">Div element
<button id="toTop">Scroll back to top</button>
</div>Alternatively, you can pass an options object to window.scroll which scrolls to a specific x and y position and window.scrollBy which scrolls a certain amount from the current position:
// Scroll to specific values
// scrollTo is the same
window.scroll({
top: 2500,
left: 0,
behavior: 'smooth'
});
// Scroll certain amounts from current position
window.scrollBy({
top: 100, // could be negative value
left: 0,
behavior: 'smooth'
});
Demo:
<button onClick="scrollToDiv()">Scroll To Element</button>
<div style="margin: 500px 0px;">Div</div>
<script>
function scrollToDiv(){
var elem = document.querySelector("div");
window.scroll({
top: elem.offsetTop,
left: 0,
behavior: 'smooth'
});
}
</script>Modern browsers support the scroll-behavior CSS property, which can be used to make scrolling in the document smooth (without the need for JavaScript). Anchor tags can be used for this by giving the anchor tag a href of # plus the id of the element to scroll to). You can also set the scroll-behavior property for a specific container like a div to make its contents scroll smoothly.
Demo:
html, body{
scroll-behavior: smooth;
}<a href="#elem">Scroll To Element</a>
<div id="elem" style="margin: 500px 0px;">Div</div>