StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POAutomaticly scrollTo closest div jQuery/Javascript
text
Body
copied!<p><strong>Alright guys, this is a tough one so bare with me..</strong></p> <p>I'm building a single page ScrollTo website with 4 div's. These div's represent my pages.<br> <br> Home -> My work -> About me -> Contact <br> <br> The width and hight are defined by a small piece of javascript that reads the users screen resolution on bodyload or resize. So the div's are always the inner-width and height of the users screen. <br> <br> </p> <pre><code>function resize() { document.getElementById("home").style.height = viewportheight+"px"; document.getElementById("work").style.height = viewportheight+"px"; document.getElementById("about").style.height = viewportheight+"px"; document.getElementById("contact").style.height = viewportheight+"px"; </code></pre> <p><br>What I'm trying to accomplish is that once the user scrolls (let's say 100px down or up), the window automaticly snaps to the top of the nearest div. </p> <p>Something like:<br></p> <pre><code>onScroll("100px") up or down { scrollTo("closest #div") }; </code></pre> <p><br>Thanks in advance. <br></p> <p><strong>EDIT:</strong> Found the answer!</p> <p>There's a plugin called stelarjs, wich was modified to scroll verticly instead of horizontally. Got exactly the effect I was looking for:</p> <pre><code>var STELLARJS = { init: function() { var self = this; $(function(){ self.$sections = $('#landing_page, #work, #about, #contact').each(function(index){ $(this).data('sectionIndex', index); }); self.handleEvents(); }); }, handleEvents: function() { var self = this, //Debounce function from Underscore.js debounce = function(func, wait) { var timeout; return function() { var context = this, args = arguments; var later = function() { timeout = null; func.apply(context, args); }; clearTimeout(timeout); timeout = setTimeout(later, wait); } }, handleScroll = function() { var scrollTop = $(window).scrollTop(), sectionIndex = Math.round((scrollTop) / self.$sections.first().outerHeight()), $activeSection = self.$sections.eq(sectionIndex); if ($activeSection.length === 0) { $activeSection = self.$sections.last(); } if ($activeSection.length === 0) return; $(window).unbind('scroll.stellarsite'); if (scrollTop === 0) { $(window).unbind('scroll.stellarsite').bind('scroll.stellarsite', debounce(handleScroll, 500)); } else { $('html,body').animate({ scrollTop: $activeSection.offset().top }, 600, 'easeInOutExpo', function() { setTimeout(function(){ $(window).unbind('scroll.stellarsite').bind('scroll.stellarsite', debounce(handleScroll, 500)); }, 10); }); } $(window).bind('mousewheel', function(){ $('html,body').stop(true, true); }); $(document).bind('keydown', function(e){ var key = e.which; if (key === 37 || key === 39) { $('html,body').stop(true, true); } }); }; if (window.location.href.indexOf('#show-offset-parents-default') === -1) { $(window).bind('scroll.stellarsite', debounce(handleScroll, 500)); } } }); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload