button scroll

a button div scrolling solution

by junglized

HTML

<div class="content">
	<div class="buttons">
        <a class="page_down">down</a>
 		<a class="page_up">up</a>
	</div>
	<div class="contentHolder">
            	<div class="pageContent">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eleifend eros a enim aliquam, vitae porttitor risus imperdiet. Quisque vitae interdum tellus, nec scelerisque erat. Nunc vel dapibus augue. Cras ornare id sapien vel commodo. Phasellus dolor dolor, bibendum in fringilla sit amet, posuere non magna. Nulla vitae semper arcu, eu dapibus leo. Nulla porta sagittis mi, non convallis libero. Nullam molestie, sapien vulputate posuere pellentesque, tortor erat dignissim lorem, vitae sollicitudin urna enim vel nibh. Nullam non aliquam nisl. Mauris semper eros justo, ac consectetur lorem rhoncus vel. 

 Integer ut auctor felis. Sed in libero dui. Fusce et velit libero. Fusce posuere pretium mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam laoreet leo nec sapien scelerisque, id faucibus ipsum sollicitudin. Nulla facilisi. Phasellus leo turpis, posuere ac massa sit amet, fermentum rhoncus mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse viverra tortor dolor, sit amet dapibus purus blandit aliquam. Praesent fermentum blandit enim, at venenatis est dictum sed. Etiam varius faucibus mollis. Integer ut eros semper, iaculis libero tristique, dapibus quam. Donec et porta elit, eget posuere erat. Nunc aliquet nibh at ante lacinia, non eleifend augue convallis. 

 Ut porta dictum nisi, vitae tincidunt erat congue non. Donec ut leo ac neque scelerisque volutpat in nec ipsum. Integer at nisl sit amet lectus gravida consectetur. In quis nisl dignissim, convallis diam vel, fermentum felis. Curabitur sit amet odio et est tincidunt sodales. Pellentesque egestas orci sed lorem molestie, eu consectetur massa cursus. Duis ullamcorper accumsan mi, nec ullamcorper neque pretium sit amet. Quisque...

CSS

.contentHolder {overflow:auto;height:257px;display:block;width:370px;}
.disabled {display:none;}
.buttons{margin-top:0;position:relative;height:0px;}
.page_up, .page_down{position:absolute; height:20px;width:40px;background:red;text-indent:-9999px;}
.page_up{top:-20px;}
.page_down{bottom:-300px;}

JavaScript

function setPageArrows() {
		contentPages = Math.ceil($('.pageContent').height() / 150) -1;
		$(".page_up, .page_down").addClass("disabled");

		if (contentPage > 1) {
			$(".page_up").removeClass("disabled");
		}
		if (contentPage < contentPages) {
			$(".page_down").removeClass("disabled");
		}
	}

	//initialise the starting page and the number of pages
	var contentPage = 1;
	var contentPages = 1;


jQuery(document)
		.ready(function($) {
			/* Page scroll */
			$(".page_up").click(function() {
				if (contentPage > 1) {
					contentPage--;
					$(".pageContent").animate({
						"margin-top" : "+=160px"
					}, "fast",function() {
					    setPageArrows();
					  });

				}
			});
			
			$(".page_down").click(function() {
				if (contentPage < contentPages) {
					contentPage++;
					$(".pageContent").animate({
						"margin-top" : "-=160px"
					}, "fast",function() {
					    setPageArrows();
					  });
				}
			});


			setPageArrows();
		});