JQUERY: Scrolling

Miva Knowledge Base
Want to start an online store? We work with you from start to finish, from commerce platform to design to SEO.
Experience counts, and we have a lot.
Important Notice: This information is for internal reference only. Use at your own risk.

JQUERY: Scrolling

Scot Ranney • December 17, 2023


More Recent Version:

<style>
.back-to-top {
	color: #fff;
	cursor: pointer;
	display: none;
	position: fixed;
	right: 2rem;
	bottom: 6rem;
	background: #35475b;
	text-align: center;
	width: 50px;
	height: 30px;
	padding-top: 5px;
}
</style>
<div class="back-to-top" style="display: none;"><span class="u-icon-chevron-up" aria-hidden="true"></span></div>
<script>
$(window).scroll(function() {
	if ($(this).scrollTop() > 75) {
		$('.back-to-top').fadeIn();
	} else {
		$('.back-to-top').fadeOut();
	}
}).trigger('scroll');
$('.back-to-top').on("click",function() {
	$('html, body').animate({ scrollTop: 0 }, 'slow', function () {
	});
});
</script>

Older version but works great:

### Click this:

<a href="#startherebutton"  id="starthere" class="button-oval"><span class="white">Start Here <i class="fa fa-caret-right"></i></span></a>

### Scroll to:

<h2 class="align-center black" name="startherebutton">What Are You Creating?</h2>

### Javascript:

<script>
	$('#starthere').click(function(){
		$('html, body').animate({
			scrollTop: $( $(this).attr('href') ).offset().top
		}, 500);
	return false;
});
</script>

### with 50 px offset:

<script>
	$('#starthere').click(function(){
		$('html, body').animate({
			scrollTop: $( $(this).attr('href') ).offset().top -50
		}, 500);
	return false;
});
</script>

Another version that works fine:

<style>
.totop {
	position: fixed;
	bottom: 0;
	right: 0;
	z-index: 104400;
}
</style>

In footer area:

<span class="totop" style="display: none;"><a class="btn btn-small btn-info mb-2" href="#"><i class="fa fa-chevron-up"></i></a></span>

Jquery script:

<script>
$(document).ready(function () {
	function backToTop () {
			var chaser = $('.totop');
		windowHeight = $(window).height();

		if (chaser) {
		$(window).scroll(function() {
			if ($(window).scrollTop() >= windowHeight / 2) {
				chaser.fadeIn();
			} else {
				chaser.hide();
			};
		});
		chaser.find('a').on('click', function (e) {
			e.preventDefault();
			$('html, body').animate({scrollTop: '0px'}, 800);
		});
		};
	};
	var backToTop = new backToTop;
});
</script>

https://www.scotsscripts.com/mvblog/smart-scroll-to-top.html

mvkb_js mvkb_scroll mvkb_jquery