Streaming live at 10am (PST)

How to make custom scroll indicator on on-page site


Any idea on how to make something like the scroll indicator on the right hand side in this page?

Edit: Should perhaps nota that I dont mean the fancy custom animation, just the indicator dots/squares and that they change highlighting when you scroll downwards on the page.


It would take a bit of computation, like what I have done for this site

$(document).scroll(function(e) {
  var curpos = $(this).scrollTop();
  var winheight = $(window).height();
  $('.js-anchor-nav a').reverse().each(function() {
    var $elem = $(''+$(this).attr('href'));
    var elempos = $elem.offset().top;
    if(curpos <= elempos) {
$('.js-anchor-nav li').click(function() {
  var $elem = $(''+$(this).children('a').attr('href'));
  $('html, body').animate({
    scrollTop: $elem.offset().top 
      - $('#header').height()
      - ($(document).scrollTop() == 0 ? 93 : 0) // magic. do not touch
    }, 800);

Thanks Samliew. Just what I was looking for, will have a try with this!


This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.