Miva Merchant Modules and Development
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.

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