Smooth Scroll Paragraph
Smooth Scroll to new Chapters and Paragraphs
This useful code creates up and down scroll buttons to smoothly scroll from chapter to chapter or section to section in a book or presentation.
*Featured Code Created by Calvin
HTML with CSS and JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
transition: all 10s;
/*overflow: hidden;*/
}
p {
text-indent: 20px;
}
a {
padding: 5px;
width: 30px;
height: 30px;
border: 1px solid steelblue;
display: inline-block;
position: fixed;
bottom: 10px;
background-color: steelblue;
opacity: .6;
color: white;
font-weight: bold;
font-size: 1.5em;
text-align: center;
line-height: 30px;
}
a:active {
opacity: 1;
}
a.up {
right: 10px;
}
a.down {
right: 60px;
}
body {
background-image: url(https://www.sololearn.com/avatars/4a75d57e-299b-4327-88da-a30596cb3405.jpg);
background-repeat: no-repeat;
background-size: 5% auto;
background-position: 98% 95vh;
}
</style>
</head>
<body>
<h1 id="p0">Novel Title</h1>
<p id="p1">Chapter 1 - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer tempor. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Sed convallis magna eu sem. Curabitur vitae diam non enim vestibulum interdum. Etiam bibendum elit eget erat. Nulla non lectus sed nisl molestie malesuada. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. Fusce suscipit libero eget elit. Nulla pulvinar eleifend sem. Aenean id metus id velit ullamcorper pulvinar. Nam quis nulla. Donec vitae arcu. Ut tempus purus at lorem. Vivamus ac leo pretium faucibus. Aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet....</p>
<p>Lorem ipsum dolor sit amet.....</p>
<p id="p2">Chapter 2 - Aenean fermentum risus id tortor. Aliquam erat volutpat. Nulla non arcu lacinia neque faucibus fringilla. Aliquam id dolor. Aliquam erat volutpat. Nullam faucibus mi quis velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis ante orci, molestie vitae vehicula venenatis, tincidunt ac pede. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Etiam posuere lacus quis dolor. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet....</p>
<p>Lorem ipsum dolor sit amet.....</p>
<p id="p3">Chapter 3 - Duis condimentum augue id magna semper rutrum. Mauris elementum mauris vitae tortor. Nulla est. Cras elementum. Duis viverra diam non justo. Nullam at arcu a est sollicitudin euismod. Aliquam in lorem sit amet leo accumsan lacinia. Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus. Maecenas ipsum velit, consectetuer eu lobortis ut, dictum at dui. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Pellentesque arcu. Vivamus porttitor turpis ac leo. Pellentesque arcu. Quisque tincidunt scelerisque libero. Aenean fermentum risus id tortor.</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet....</p>
<p>Lorem ipsum dolor sit amet.....</p>
<p id="p4">Chapter 4 - Fusce tellus. Praesent in mauris eu tortor porttitor accumsan. Duis pulvinar. Etiam dictum tincidunt diam. Mauris metus. Praesent in mauris eu tortor porttitor accumsan. Aliquam erat volutpat. Cras elementum. Pellentesque ipsum. Maecenas libero. Duis ante orci, molestie vitae vehicula venenatis, tincidunt ac pede. Nam quis nulla. Integer lacinia. Aenean vel massa quis mauris vehicula lacinia. Mauris tincidunt sem sed arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet....</p>
<p>Lorem ipsum dolor sit amet.....</p>
<p id="p5">Chapter 5 - Aliquam ante. Aliquam erat volutpat. Curabitur sagittis hendrerit ante. Mauris metus. Etiam dictum tincidunt diam. Etiam bibendum elit eget erat. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Curabitur sagittis hendrerit ante. Nulla quis diam. Quisque porta. Nullam sit amet magna in magna gravida vehicula. Mauris tincidunt sem sed arcu. Nullam faucibus mi quis velit. Mauris elementum mauris vitae tortor. Suspendisse nisl. Nulla pulvinar eleifend sem. Mauris tincidunt sem sed arcu. Fusce tellus. Nulla quis diam.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer tempor. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Sed convallis magna eu sem. Curabitur vitae diam non enim vestibulum interdum. Etiam bibendum elit eget erat. Nulla non lectus sed nisl molestie malesuada. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. Fusce suscipit libero eget elit. Nulla pulvinar eleifend sem. Aenean id metus id velit ullamcorper pulvinar. Nam quis nulla. Donec vitae arcu. Ut tempus purus at lorem. Vivamus ac leo pretium faucibus. Aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet....</p>
<p>Lorem ipsum dolor sit amet.....</p>
<p id="p6">Chapter 6 - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer tempor. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Sed convallis magna eu sem. Curabitur vitae diam non enim vestibulum interdum. Etiam bibendum elit eget erat. Nulla non lectus sed nisl molestie malesuada. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. Fusce suscipit libero eget elit. Nulla pulvinar eleifend sem. Aenean id metus id velit ullamcorper pulvinar. Nam quis nulla. Donec vitae arcu. Ut tempus purus at lorem. Vivamus ac leo pretium faucibus. Aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet....</p>
<p>Lorem ipsum dolor sit amet.....</p>
<p id="p7">Chapter 7 - Aenean fermentum risus id tortor. Aliquam erat volutpat. Nulla non arcu lacinia neque faucibus fringilla. Aliquam id dolor. Aliquam erat volutpat. Nullam faucibus mi quis velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis ante orci, molestie vitae vehicula venenatis, tincidunt ac pede. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Etiam posuere lacus quis dolor. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer tempor. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Sed convallis magna eu sem. Curabitur vitae diam non enim vestibulum interdum. Etiam bibendum elit eget erat. Nulla non lectus sed nisl molestie malesuada. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. Fusce suscipit libero eget elit. Nulla pulvinar eleifend sem. Aenean id metus id velit ullamcorper pulvinar. Nam quis nulla. Donec vitae arcu. Ut tempus purus at lorem. Vivamus ac leo pretium faucibus. Aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet....</p>
<p>Lorem ipsum dolor sit amet.....</p>
<p id="p8">Chapter 8 - Duis condimentum augue id magna semper rutrum. Mauris elementum mauris vitae tortor. Nulla est. Cras elementum. Duis viverra diam non justo. Nullam at arcu a est sollicitudin euismod. Aliquam in lorem sit amet leo accumsan lacinia. Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus. Maecenas ipsum velit, consectetuer eu lobortis ut, dictum at dui. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Pellentesque arcu. Vivamus porttitor turpis ac leo. Pellentesque arcu. Quisque tincidunt scelerisque libero. Aenean fermentum risus id tortor.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer tempor. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Sed convallis magna eu sem. Curabitur vitae diam non enim vestibulum interdum. Etiam bibendum elit eget erat. Nulla non lectus sed nisl molestie malesuada. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. Fusce suscipit libero eget elit. Nulla pulvinar eleifend sem. Aenean id metus id velit ullamcorper pulvinar. Nam quis nulla. Donec vitae arcu. Ut tempus purus at lorem. Vivamus ac leo pretium faucibus. Aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet....</p>
<p>Lorem ipsum dolor sit amet.....</p>
<p>Lorem ipsum dolor sit amet...</p>
<p id="p9">Chapter 9 - Fusce tellus. Praesent in mauris eu tortor porttitor accumsan. Duis pulvinar. Etiam dictum tincidunt diam. Mauris metus. Praesent in mauris eu tortor porttitor accumsan. Aliquam erat volutpat. Cras elementum. Pellentesque ipsum. Maecenas libero. Duis ante orci, molestie vitae vehicula venenatis, tincidunt ac pede. Nam quis nulla. Integer lacinia. Aenean vel massa quis mauris vehicula lacinia. Mauris tincidunt sem sed arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer tempor. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Sed convallis magna eu sem. Curabitur vitae diam non enim vestibulum interdum. Etiam bibendum elit eget erat. Nulla non lectus sed nisl molestie malesuada. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. Fusce suscipit libero eget elit. Nulla pulvinar eleifend sem. Aenean id metus id velit ullamcorper pulvinar. Nam quis nulla. Donec vitae arcu. Ut tempus purus at lorem. Vivamus ac leo pretium faucibus. Aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet....</p>
<p>Lorem ipsum dolor sit amet.....</p>
<p id="p10">Chapter 10 - Final- Aliquam ante. Aliquam erat volutpat. Curabitur sagittis hendrerit ante. Mauris metus. Etiam dictum tincidunt diam. Etiam bibendum elit eget erat. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Curabitur sagittis hendrerit ante. Nulla quis diam. Quisque porta. Nullam sit amet magna in magna gravida vehicula. Mauris tincidunt sem sed arcu. Nullam faucibus mi quis velit. Mauris elementum mauris vitae tortor. Suspendisse nisl. Nulla pulvinar eleifend sem. Mauris tincidunt sem sed arcu. Fusce tellus. Nulla quis diam.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer tempor. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Sed convallis magna eu sem. Curabitur vitae diam non enim vestibulum interdum. Etiam bibendum elit eget erat. Nulla non lectus sed nisl molestie malesuada. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. Fusce suscipit libero eget elit. Nulla pulvinar eleifend sem. Aenean id metus id velit ullamcorper pulvinar. Nam quis nulla. Donec vitae arcu. Ut tempus purus at lorem. Vivamus ac leo pretium faucibus. Aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet....</p>
<p>Lorem ipsum dolor sit amet.....</p>
<div style="height:80vh"></div>
<a class="down" href="#p2">⇩</a>
<a class="up" href="#p1">⇧</a>
<script>
var up, down;
function pUp(el) {
var p = parseInt(up.getAttribute('href').replace('#p',''),10);
up.setAttribute('href', '#p'+(p===1? 1:p-1));
down.setAttribute('href', '#p'+(p>8?10:p+1));
}
function pDown(el) {
var p = parseInt(down.getAttribute('href').replace('#p',''),10)
down.setAttribute('href', '#p'+(p>=10?10:p+1));
up.setAttribute('href', '#p'+(p===1?1:p-1));
}
onload = main;
function main() {
up = document.querySelector('a.up');
down = document.querySelector('a.down');
up.addEventListener('click', scrollUp, false);
down.addEventListener('click', scrollDown, false);
}
function scrollUp(evt) {
evt.preventDefault();
var hash = evt.target.href.match(/\#.*/);
var nextId = document.querySelector(hash);
if(nextId!==undefined) nextId.scrollIntoView({
behavior: "smooth",
block: "start",
inline: "start"
});
pUp(evt.target);
}
function scrollDown(evt) {
evt.preventDefault();
var hash = evt.target.href.match(/\#.*/);
var nextId = document.querySelector(hash);
if(nextId!==undefined) nextId.scrollIntoView({
behavior: "smooth",
block: "start",
inline: "start"
});
pDown(evt.target);
}
</script>
</body>
</html>
Click here to see this code in Action
Share with Friends
Comments
Post a Comment