Merge pull request #5 from mrk-j/scroll-to-top

Scroll to top
mrk-j · Jan 6, 2016 · e8fb6e0 · e8fb6e0
2 parents 5fc28cc + 0f1a5d5
commit e8fb6e0
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 5 deletions.
diff --git a/example.html b/example.html
@@ -46,6 +46,11 @@
 			{
 				overflow: hidden;
 			}
+
+			.paginate-no-scroll .items div
+			{
+				height: 250px;
+			}
 		</style>
 	</head>
 	<body>
@@ -127,15 +132,43 @@ <h2>Example 4 (start on page 2)</h2>
 				<div class="lastPage">&raquo;</div>
 			</div>
 		</div>
+		<h2>Example 5 (no scroll to top)</h2>
+		<div class="paginate-no-scroll 5">
+			<div class="items">
+				<div>Item 1</div>
+				<div>Item 2</div>
+				<div>Item 3</div>
+				<div>Item 4</div>
+				<div>Item 5</div>
+				<div>Item 6</div>
+				<div>Item 7</div>
+				<div>Item 8</div>
+				<div>Item 9</div>
+				<div>Item 10</div>
+				<div>Item 11</div>
+				<div>Item 12</div>
+			</div>
+			<div class="pager">
+				<div class="firstPage">&laquo;</div>
+				<div class="previousPage">&lsaquo;</div>
+				<div class="pageNumbers"></div>
+				<div class="nextPage">&rsaquo;</div>
+				<div class="lastPage">&raquo;</div>
+			</div>
+		</div>
 		<script>
 			$(function() {
 				$(".paginate").paginga({
-
+					// use default options
 				});
 
 				$(".paginate-page-2").paginga({
 					page: 2
 				});
+
+				$(".paginate-no-scroll").paginga({
+					scrollToTop: false
+				});
 			});
 		</script>
 	</body>

diff --git a/paginga.jquery.js b/paginga.jquery.js
@@ -1,5 +1,5 @@
 /*!
- * paginga - jQuery Pagination Plugin v0.3
+ * paginga - jQuery Pagination Plugin v0.4
  * https://github.com/mrk-j/paginga
  *
  * Copyright 2015 Mark and other contributors
@@ -24,6 +24,10 @@
 				currentPageClass: "active",
 				pager: ".pager",
 				autoHidePager: true,
+				scrollToTop: {
+					offset: 15,
+					speed: 100,
+				},
 			};
 
 		// The actual plugin constructor
@@ -33,6 +37,7 @@
 			this.settings = $.extend( {}, defaults, options );
 			this._defaults = defaults;
 			this._name = pluginName;
+			this._ready = false;
 			this.currentPage = this.settings.page;
 			this.items = $(this.element).find(".items " + this.settings.item);
 			this.totalPages = Math.ceil(this.items.size() / this.settings.itemsPerPage);
@@ -53,6 +58,7 @@
 			{
 				this.bindEvents();
 				this.showPage();
+				this._ready = true;
 			},
 			bindEvents: function()
 			{
@@ -141,6 +147,11 @@
 					firstElement = element.find(plugin.settings.firstPage),
 					lastElement = element.find(plugin.settings.lastPage);
 
+				if(plugin._ready && plugin.settings.scrollToTop && (element.offset().top - plugin.settings.scrollToTop.offset) < $(window).scrollTop())
+				{
+					$("html, body").animate({ scrollTop: (element.offset().top - plugin.settings.scrollToTop.offset) }, plugin.settings.scrollToTop.speed);
+				}
+
 				if(this.currentPage <= 1)
 				{
 					previousElement.addClass("disabled");
@@ -174,7 +185,7 @@
 					{
 						var className = pageNumber == this.currentPage ? this.settings.currentPageClass : "";
 
-						pageNumbers.append("<a href='#' data-page='" + pageNumber + "' class='" + className + "'>" + pageNumber + "</a>");
+						pageNumbers.append("<a href='javascript:void(0);' data-page='" + pageNumber + "' class='" + className + "'>" + pageNumber + "</a>");
 					}
 
 					pageNumbers.find("a").on("click", function()

diff --git a/paginga.jquery.min.js b/paginga.jquery.min.js