Pelican

XHTML/CSS: Long-Scroll Web Pages

You've probably seen plenty of these commercially oriented web pages where you can scroll down multiple times:

MadCap Software
DreamHost. Web hosting
GitHub
Buttercup. Password management

No video is available for this unit. If it's needed, contact admin@mcmassociates.io

Practice

Natively, web pages can be made infinitely scrollable.

  1. Just enter HTML and CSS: 
    
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="https://mcmassociates.io/standard.css" />
<style>
	body {height: 15000px;  background: linear-gradient(#00ff04, #09aad3);}
	p {margin-bottom: 12pt;}
</style>
<script>
</script>
<title>Simple Long-Scroll Webpage</title>
</head>
<body>

</body>
</html>
  2. Between the body tags, add this paragraph bunches and bunches of times: 
    	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
    
	incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
    
	exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
    
	irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat 
    
	nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
    
	officia deserunt mollit anim id est laborum.</p>
  3. Now try this page out. Notice the gradient color and the rightside scrollbar.
  4. Next, put in a back-to-top button just below <body>: 
    	<button onclick="topFunction()" id="theButton" title="Back to top">Top</button>
  5. Put these tags in the style area of the web page: 
    #theButton {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}
#theButton:hover {
  background-color: #555;
}
  6. If you try to display this web page now, you would not see the back-to-top button. We need the following JavaScript for that. Copy the following code and paste it just below the tagging for the button: 
    <script>
//Get the button
var mybutton = document.getElementById("theButton");

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    mybutton.style.display = "block";
  } else {
    mybutton.style.display = "none";
  }
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}
</script>
  7. Now try this page out again. You must scroll at least once for the button to display. Notice that it always stays at page bottom.

Complete This Unit

  1. Actually, there's much more coding for the type of page. See Anish De's link below.
  2. Copy and paste the above HTML and JavaScript into a web page, changing whatever you dare.
  3. Either:
    • Send your file (or files) by e-mail attachment to your instructor at admin@mcmassociates.io (use this link).
      • or
    • Upload your file (or files) to your website, and send the URL to your instructor at admin@mcmassociates.io (use this link).
  4. Your instructor will review, point out any problems, enabling you to revise and resend.

Return

Return to your bookmarked course main page.

Related Information

How To Create a Scroll To Top Button. W3schools

Take It to the Limit – An Overview of Long Scroll Websites. Cameron Chapman, toptal.com

Long-Scrolling Websites: Tips and Best Practices. Rebecca Vogels, usersnap.com

How to build a long-scrolling Landing Page using Squarespace 7.1 (with smooth scroll). Rob Hope, 2020. Unfortunately, this video is based on Squarespace but it provides a nice design overview.

Just Keep Scrolling! How To Design Lengthy, Lengthy Pages . Nick Babich, smashingmagazine.com, May 25, 2017

Create Fullscreen One Page Scrolling Websites With fullPage.js. jqueryscript.net

https://www.freecodecamp.org/news/back-to-top-button-and-page-progressbar-with-html-css-and-js/. Anish De, feecodecamp.org

Free one-page templates and themes. Collection of One Page templates and themes built by Cruip

Cruip documentation

Information and programs provided by admin@mcmassociates.io.