Robert Spangler

UI/UX designer & front-end developer

Navigation

SnapPoint jQuery Plugin

This recently built plugin automatically smooth scrolls the visitor’s browser window to a block of content. This certainly isn’t necessary for most sites, but can be beneficial for an experience where you have multiple short blocks of content.

  • Here’s a demo
  • Here’s the link to it on github

You can adjust the delay, the top threshold, the bottom threshold, and the animation speed.

$(".block").snapPoint({ 
    scrollDelay: 550,       //Amount of time the visitor has to scroll before the snap point kicks in (ms)
    scrollSpeed: 90,        //Length of smooth scroll's animation (ms)
    outerTopOffset: 220,    //Number of pixels for the downward vertical offset (relative to the top of your snapping container)
    innerTopOffset: 0       //Number of pixels for the upward vertical offset (relative to the top of your snapping container)
});

I’m not a professional javascript guy, but I’m excited to release my first official plugin. Feel free to poke around and make any suggestions.

6 Responses to “SnapPoint jQuery Plugin”

  1. Broom

    Great plugin, thanks for putting it out there… I have a quick question… How would I extend this plugin, so that I could destroy it?

    Right now, I’m working on a responsive site that utilizes this code in the desktop version of the site, however, I’d like to disable it for tablet/mobile devices.

    Reply
    • Rob

      Thanks Broom, I had to do this for another site as well. I’m considering adding something like this to the plugin. One thing that you can do for now is overwrite the offset options within the function, based on the screen width. For you it might look something like:

      if ( $(document).width() <= 768 ) { options.outerTopOffset = 0; } (within this function: "elArray.each(function(){", at the top)

      Reply
  2. Peter

    Thanks for sharing this plug-in.

    I have a fixed top navigation, and I’m wondering how I could add a certain number of pixels to the target class?

    Reply
    • Rob

      Hi Peter, I’ve used this on a site with a fixed-navigation as well. I would actually recommend doing this in your CSS file by simply adding padding to top of your SnapPoint container. For example if you had a fixed-navigation 80px high I would do “.mySnapPointDiv { padding-top: 80px; }”. I hope that helps.

      Reply
  3. Benjamin

    Hello Rob,

    i am using your plugin and it works quite well. But i have a question. As i work with 100% viewport height “containers” i’d like to change the settings for inner/outer topoffset to a percentage value. is that possible somehow? i dont have that much knowledge on javascript…thanks in advance for your help!

    Reply

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

About Robert

I work with clients ranging from local small businesses and non-profits to large Fortune 500 companies.

If you think I'm the right guy for your project, please feel free to give me a shout.

I am a full-time freelance website designer and front-end developer from Baltimore, Maryland, currently living in Nairobi, Kenya.

I design and code for user experience on the web with special attention on mobile devices. I come from a background in eCommerce and lead generation, which I'm very good at. I spend most of my time personalizing and creating customized WordPress themes for clients. Other than designing websites I spend time with family, study, occasionally tweet, and rarely +.