← Snippets - Script - Animations

Scroll Hint

Sometimes people forget that they can scroll down a web page. If you put a scroll hint on the page “above the fold” (aka on initial page load, because websites don’t fold), it will, apparently, remind them. (If that’s not enough, there’s also instructions further down about how to animate the scroll hint after a second or two.)

How to Set Up the Scroll Hint

Script

It makes sense to put this near the back-to-top script setup since it’s a similar function.

$('#scrollHint').on('click', function(e) {
    var targetSpace = $('.scrollhint-target');
    e.preventDefault();
    $bodyhtml.animate({
      scrollTop: targetSpace.offset().top
    }, 600, function() {
      targetSpace.focus();
    }); // scroll to top for all other browsers
});

HTML

You may want to create a scroll-hint.mustache file, if the scroll hint is being used in more places than just the homepage.

<button type="button" id="scrollHint">
  <span class="triangle" aria-hidden="true"></span>
  <span class="text">See More</span>
</button>

Also, remember that if your scroll hint is meant to take you to a specific place (usually the div below the hero ad), you may need to wrap the area below the hero ad in something. In this example, as according to the script above, you’d need to wrap it in a div with a class of scrollhint-target.

How To Animate the Scroll Hint

Copy the script below and put it inside your large function in the scripts.js. I like to put it near the scrollTop piece since that’s where I also put my scroll hints/scroll-down items.

Make sure to edit the item that’s being moved to match yours–in this, it’s #scrollHint.

Be careful to target ID or class, whichever one is correct

You can also edit the doBounce function at the end to change the element that’s being edited, for example changing marginTop to be marginRight instead for an object that’s been rotated with CSS.

setTimeout(function(){
	$("#scrollHint").each(function() {
    	doBounce($(this), 3, '10px', 300);
    });
}, 3000);
setTimeout(function(){
    $("#scrollHint").each(function() {
      	doBounce($(this), 3, '10px', 300);
    })
}, 9000);
setTimeout(function(){
    $("#scrollHint").each(function() {
     	doBounce($(this), 3, '10px', 300);
    })
}, 15000);
function doBounce(element, times, distance, speed) {
    for(i = 0; i < times; i++) {
        element.animate({marginTop: '-='+distance},speed)
               .animate({marginTop: '+='+distance},speed);
    }
}

Example Sites

Tags: js, jquery, javascript, scroll, scroll hint, bs2, bs3, bs4, animation