Jump to content


Photo
- - - - -

Scrool to Top Script

integration page scroll top

  • Please log in to reply
1 reply to this topic

#1 tube

tube

    Junior Member

  • Members
  • PipPip
  • 20 posts

Posted 12 February 2013 - 10:32 PM

Hello,

I found a free Scrool to Top script. It's cool and very useful for long lenght pages.

Demo: http://bit.ly/hFEPOk

Documentation: http://bit.ly/gFCbk1

Download Sample: http://bit.ly/WZPHd2


I think it will be very nice if somebody can explain how we can integrate it to AVS. It'll be useful for all.

Thanks :)

Edited by tube, 12 February 2013 - 10:37 PM.


#2 theone

theone

    Senior Member

  • Members
  • PipPipPipPip
  • 368 posts

Posted 13 February 2013 - 12:43 AM

You would need to......

Upload up-arrow.png to your templates images folder.

Add the following to style.css

#back-top {
	position: fixed;
	bottom: 30px;
	margin-left: -150px;
}
#back-top a {
	width: 108px;
	display: block;
	text-align: center;
	font: 11px/100% Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	color: #bbb;
	/* background color transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}
#back-top a:hover {
	color: #000;
}
/* arrow icon (span tag) */
#back-top span {
	width: 108px;
	height: 108px;
	display: block;
	margin-bottom: 7px;
	background: #ddd url(../images/up-arrow.png) no-repeat center center;
	/* rounded corners */
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	/* background color transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}
#back-top a:hover span {
	background-color: #777;
}

Add the following to header.tpl

<script>
$(document).ready(function(){

	// hide #back-top first
	$("#back-top").hide();
	
	// fade in #back-top
	$(function () {
		$(window).scroll(function () {
			if ($(this).scrollTop() > 100) {
				$('#back-top').fadeIn();
			} else {
				$('#back-top').fadeOut();
			}
		});

		// scroll body to 0px on click
		$('#back-top a').click(function () {
			$('body,html').animate({
				scrollTop: 0
			}, 800);
			return false;
		});
	});

});
</script>

Add this to footer.tpl

<p id="back-top">
		<a href="#top"><span></span>Back to Top</a>
	</p>

I haven't tested this but that should do the trick.





Also tagged with one or more of these keywords: integration, page, scroll, top