Tuesday, January 31, 2012

How to scroll down with jquery when user reached a specific part of an image?


It's hard to describe what exactly i was looking for and sorry for my english. What i want to do is, while user scroll down slowly, when user reached a specific point, starting to scroll down page like 1000px and then stop scrolling at the second specific point.



Here is an example:



http://comic.naver.com/webtoon/detail.nhn?titleId=350217&no=31&weekday=tu



It should be cross browser compatible.

3 comments:

  1. You can use jQuery, hook onto $(document).scroll(). Whenever the scrollTop passes a certain threshold, make it smooth scroll down to the end point.

    $(document).scroll(function() {
    if ($(document).scrollTop() > ####) {
    smoothScrollTo(###);
    }
    });

    ReplyDelete
  2. Ok so I would use setTimout to check the scroll position every so often and then if the scroll position is right, scare the user or whatever you are planning:

    var checkScroll = function() {
    if(window.scrollY > 1000) {
    setTimeout(checkScroll, 100);
    }
    else {
    doSomeScaryStuff()
    }
    }

    // need to call it manually the first time
    checkScroll();


    make sense?

    ReplyDelete
  3. Detect the current position of the top of the window using http://api.jquery.com/scrollTop/ and the window element, and use the same method combined with .animate() to smooth scroll down.

    Hope that helps!

    ReplyDelete