One of the recent trends in web design is the single-page layout. This style of website displays multiple sections on a single page, allowing users to click on anchors within the page to move between different sections smoothly. This article provides a detailed explanation of how to use jquery.page-scroller.js to implement smooth scrolling for such page anchors.
Including Necessary JavaScript
First, to use jquery.page-scroller-308.js, you need to load the following two JavaScript files:
- jquery-1.6.min.js
- jquery.page-scroller-308.js
By loading these files, you can enable smooth scrolling for page anchors.
<script type="text/javascript" src="js/jquery-1.6.min.js"></script>
<script type="text/javascript" src="js/jquery.page-scroller-308.js"></script>
Additionally, you can set the scroll speed using a variable called adjSpeed. For example, to achieve smooth scrolling in 0.5 seconds, set it as follows:
<script type="text/javascript">
adjSpeed = .5;
</script>
Applying Styles
To define the style for elements to which smooth scrolling will be applied, add the following CSS. This style is provided as a sample and can be modified as needed.
<style type="text/css">
<!--
h1{
font-size:14px;
font-weight:normal;
line-height:1.2em;
}
#idWrap{
width:1000px;
height:1500px;
}
a{
font-size:14px;
text-decoration:none;
}
-->
</style>
HTML for Page Anchors
Write the HTML for page anchors in the same way as regular page anchors. Below is a sample where an anchor is placed at the top of the page, with a link back to the top positioned 1500px down the page.
<a id="top"></a>
<div id="idWrap">
<h1>ページ内アンカーをスムーズにスクロール<br>（1500px下にアンカーリンクがあります）</h1>
</div><!--/高さを1500pxに指定-->
<a href="#top">↑ページトップへ</a>
Demo Page for Smooth Scrolling Page Anchors
To see how this works in practice, please refer to the demo page below.
Demo of Smooth Scrolling Page Anchors
Source Information
This smooth scroll functionality uses a script obtained from the following site. For more detailed information, other usage methods, and customization options, please refer to the source site.
[JS] Easily Implement Smooth Scrolling for Page Anchors – Page Scroller ver.3
Conclusion
Smooth scrolling for page anchors is a great way to enhance user experience. With jquery.page-scroller.js, you can easily implement this feature on your website. Give it a try and improve the navigation on your site.
Note: Use at your own risk. Do not reuse the Google Analytics tag in the demo page tag.
