For providing a smooth user experience on a web page, efficient navigation is crucial.
This time, we will introduce how to easily implement vertical and horizontal scrolling within a page using gridscrolling.js.
What is gridscrolling.js?
gridscrolling.js is a JavaScript library that allows navigation between specific sections on a page using the keyboard arrow keys. This enables users to intuitively explore the page content.
Styling Settings
Load the gridscrolling.css file. “#gridscrolling-XXXX” and “.gridscrolling-XXXX” are the CSS descriptions for arrows and current page positions.
<link rel="stylesheet" href="gridscrolling.css">
<style>
html, body {
height: 100%;
width: 100%;
}
body {
font-size: 16px;
text-align: center;
}
h1,h2{
text-align: center;
font-size: 26px;
line-height: 1.8em;
padding: 220px 0 0 0;
}
#gridscrolling-overview { border-color: #BBB; }
.gridscrolling-overview-square { background-color: #BBB; }
.gridscrolling-looking-at { background-color: #48F; }
#gridscrolling-top-marker { border-bottom-color: #357; }
#gridscrolling-bottom-marker { border-top-color: #357; }
#gridscrolling-left-marker { border-right-color: #357; }
#gridscrolling-right-marker { border-left-color: #357; }
</style>
HTML Structure
Next, define in HTML the areas where you want to enable scroll operations with gridscrolling.js.
Prepare areas (header, section, aside) where vertical and horizontal scrolling within the page can be performed.
<header>
<h1>This page allows vertical and horizontal scrolling using gridscrolling.js.<br>Try operating with the keyboard arrow keys.</h1>
<p><a href="#area1" name="top">Click this link</a> to anchor scroll to the "name="area2"" area.</p>
</header>
<section>
<hgroup><h2>Press the Down "↓" arrow key.</h2></hgroup>
</section>
<section>
<hgroup><h2>Press the Right "→" arrow key.</h2></hgroup>
<p>Or, press the Down "↓" arrow key.</p>
</section>
<aside>
<hgroup><h2>Press the Right "→" arrow key.</h2></hgroup>
<p><a href="#area1">Click this link</a> to scroll to the right area.</p>
<p>To go back, press the Left "←" arrow key.</p>
</aside>
<aside>
<hgroup><h2><a name="area1">Press the Left "←" arrow key.</a></h2></hgroup>
</aside>
<section>
<hgroup><h2>Press the Down "↓" arrow key.</h2></hgroup>
</section>
<section>
<hgroup><h2>Press the Right "→" arrow key.</h2></hgroup>
<p><a href="#area2">Click this link</a> to scroll to the right area.</p>
<p>To go back, press the Left "←" arrow key.</p>
</section>
<aside>
<hgroup><h2><a name="area2">Press the Left "←" arrow key.</a></h2></hgroup>
</aside>
<section>
<hgroup><h2>Press the Up "↑" arrow key.</h2></hgroup>
<p>Or, <a href="#top">click this link</a> to anchor scroll to the very top "name="top"" area.</p>
</section>
JavaScript Settings
Load gridscrolling.js and jQuery, then initialize the scroll movement area.
Load jquery.min.js (version 2) and gridscrolling.js files.
Write $(‘scroll area’).gridscrolling(“init”, {options}). With options, you can configure movement speed, current position display, etc. Add the following script to your page.
<script src="jquery.min.js"></script>
<script src="gridscrolling.js"></script>
<script type="text/javascript">
$(function() {
$('body').gridscrolling("init", {
animationSpeed: 400,
showMarker: true,
showOverviewMap: true
});
});
</script>
Demo page: Scroll vertically and horizontally with arrow keys using gridscrolling.js
You can view the demo page where you can try scrolling with gridscrolling.js here:
Demo page: Scroll vertically and horizontally with arrow keys using gridscrolling.js
Source: gridscrolling.js
Conclusion
By using gridscrolling.js, you can achieve smooth vertical and horizontal scrolling operations within a page.
This allows users to efficiently explore page content and provides a better user experience.
Be sure to take advantage of this feature to build user-friendly websites.
※Please use at your own responsibility when reusing.
Do not reuse the Google Analytics tag inside the head tag of the demo page.
