webdevlinux - logo Web Dev Linux

වෙබ් පිටුවක් යට සිට උඩට auto scroll කරන්න button එකක් හදමු

සමහර වෙබ් අඩවි වල පිටුවේ යට ඇති Goto top නම් button එක click කල විට, වෙබ් පිටුව උඩට ක්‍රමයෙන් scroll වෙන ආකාරය ඔබ දැක ඇති. එවැනි දේවල් වෙබ් අඩවියකට එකතු කිරීම, වෙබ් අඩවිය නරඹන්නන්ගේ ආකර්ෂණය දිනා ගැනීමටද හේතුවක් වනු ඇත.

Smooth scroll to top Scroll to top

වෙබ් පිටුවක් උඩට scroll කිරීම සදහා භාවිතා කල හැකි smooth-scroll scripts ඕනෑ තරම් අන්තර් ජාලය තුලින් ඔබට සොයාගත හැකිය. නමුත් බොහෝමයක් ඒවා JQuery හෝ වෙනත් code libraries මත පදනම් වී ඇත. අමතර code libraries භාවිතා කිරීමේ ඇති ප්‍රධානම අවාසියක් නම්, එය නිසා ඔබගේ වෙබ් පිටුව load වීමට වැඩි කාලයක් ගැනීමයි. අමතර code libraries භාවිතා නොකර HTML, CSS සහ Javascript පමණක් භාවිතා කර, වෙබ් පිටුවක් උඩට scroll කළහැකි button එකක් සාදා ගන්නා ආකාරය මෙම පාඩමෙන් ඉදිරිපත් කෙරේ.

වෙබ් පිටුවක උඩට යෑමට භාවිතා කරන සාමාන්‍ය ක්‍රමය.

<a> element එකක href attribute එකෙහි සදහන් පිටුවේ නමට අගින් හෑෂ් (#) සලකුණ හෝ පිටුවේ නම වෙනුවට හෑෂ් (#) සලකුණ පමනක් යෙදීමෙන්, වෙබ් පිටුවක උඩට යෑමට සරල button එකක් සාදාගත හැකිය. පහත උදාහරණය බලන්න.

<!-- using hash at the end of link -->
<a href="index.html#">Page Top</a>
<!-- using just the hash -->
<a href="#">Page Top</a>

වෙබ් පිටුවක් උඩට scroll කිරීම

පහතින් දක්වා ඇති උදාහරණය බලන්න. මෙහි වෙබ් පිටුව ක්‍රමවත් කිරීම සදහා එකතු කරන ලද styles කිහිපයක්ද ඇත. මෙහි </footer> tag එක අවසානයේ ඇති <script></script> element එක තුල, පිටුව උඩට scroll කිරීමට අදාල Javascript codes ඇත.

මෙම උදාහරණය පියවරෙන් පියවර code කරන ආකාරය නැරඹීමට, පිටුවේ පහල ඇති video clip එක බලන්න.

FILE : scroll-to-top.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Scroll to page top</title>
<style>
header , footer{
	background:#ccc;
	height: 40px;
	width: 100%;
	text-align: center;
	padding:20px 0;
}
main{
	width:1000px;
	margin:20px auto;
	font-size: 3em;
	line-height: 5em;
}
#scrollButton{
	cursor: pointer;
	color: blue;
}
</style>
</head>
<body>
<header>

</header>
<main>
	<p>Lorem ipsum dolor sit amet. Vehicula. Nisl cursus nonummy aliquet odio eget, inceptos a. Cubilia suspendisse ante eget, adipiscing quis tellus sodales. Id sociosqu eni, ac aliquet eros, adipiscing. Nostra nisl ve vitae ligula cursus metus.</p>

</main>
<footer>
	<a id="scrollButton">Page Top</a>
</footer>
<script>
	var speed = 10;
	var timer;
	function scrollToTop(k) {
		if (k>0) {
			k-=speed;
			window.scrollTo(0,k);
			timer = setTimeout(function () {
				scrollToTop(k-=speed);
			},10);
		}else clearTimeout(timer);
	}
	
	document.getElementById("scrollButton").onclick=function () {
		scrollToTop(document.documentElement.scrollHeight);
	}
</script>
</body>
</html>
	

සාමාන්‍ය ක්‍රමයට වෙබ් පිටුවක උඩට යෑමට සරල button එකක් සදා ගන්නා ආකාරයත්, පසුව එම button එක, පිටුව උඩට scroll කිරීමට අවශ්‍ය පරිදි වෙනස් කරගන්නා ආකාරයක් මෙම video එකෙහි අන්තර්ගතවේ.