SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Vertical Scrolling with JS/jQuery

    Dear SitePoint Users,

    this is my first post here. I have just bought the book HTML5 & CSS3 For The Real World and have hence signed up here to get some help. I love the book so far!

    Question:
    I am trying to create a vertical scrolling effect with several anchor points on the site. The scrolling should happen neatly and slowly instead of a quick flick towards the anchor point. The effect can for example beautifully be observed on this site: http://blackestate.co.nz/ .

    How is this done please? Do I need jQuery or simply JS for that? Are there any tutorials I could follow to achieve such an effect?

    Thank you for your help.

  2. #2
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can I have a reply please?

    It is stated explicitly in the book that users here are very happy to help and engage no matter what level of experience, this is really the reason I came here.

    If this is not the case please do let me know and I will try to find help somewhere else.

    Thank you.

  3. #3
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,170
    Mentioned
    190 Post(s)
    Tagged
    2 Thread(s)
    Hi BitCore, welcome to the forums,

    I also have that book, but I can't find anything about vertical scrolling in it. What page is it at?

  4. #4
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BitCore View Post
    Are there any tutorials I could follow to achieve such an effect?
    On document load, apply an onclick handler to the entire document that does the following:

    If the event bubbles up to an <a> or <area> element and it's href resolves to an anchor within the same document, check that the anchor exists. If so determine its displacement within the document.
    Using the current scrolled position, calculate the initial scroll distance required, then periodically call a routine that scrolls the document a certain percentage of the remaining distance on each iteration until the destination position is reached, then cancel the interval.
    There are numerous operational refinements that you may wish to add later.
    Tab-indentation is a crime against humanity.

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Hi BitCore. Welcome to the forums. Sorry we were slow to reply. We are usually pretty quick. But you are difinitely in the right place.

    Quote Originally Posted by BitCore View Post
    How is this done please? Do I need jQuery or simply JS for that? Are there any tutorials I could follow to achieve such an effect?
    Yes, that's quite a nice effect, and is becoming popular these days. I have bookmarked quite a few sites that do that. They normally use jQuery, and that's probably the easiest way to do it out of the box. For example, this site

    http://grigorlawyers.com.au/

    uses jQuery ScrollTo:

    http://flesler.blogspot.com.au/2007/...yscrollto.html

    ... which I've found works quite nicely. jQuery is a different topic from the book you bought, but it's very easy to use scripts like this. You pretty much just link to the jQuery library and the special scroll script under that, as you see on the example site I linked to if you view source. (It's near the bottom of the page.)

  6. #6
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much for all your replies. I will look at the information provided and surly come back for more. Thank you. This is really much appreciated.

    Quote Originally Posted by Mittineague View Post
    I also have that book, but I can't find anything about vertical scrolling in it. What page is it at?
    I don't think it is in the book unfortunately.

    Quote Originally Posted by Logic Ali View Post
    On document load, apply an onclick handler to the entire document that does the following: If the event bubbles up to an <a> or <area> element and it's href resolves to an anchor within the same document, check that the anchor exists. If so determine its displacement within the document. Using the current scrolled position, calculate the initial scroll distance required, then periodically call a routine that scrolls the document a certain percentage of the remaining distance on each iteration until the destination position is reached, then cancel the interval. There are numerous operational refinements that you may wish to add later.
    Your reply is most possibly the most concise way of explaining how this is done, however my level of experience will need to increase to understand what you explained. I am doing research on this now.

    What I wonder though is that with a normal anchor/link inside the same document, for example, "Go to top" (from the bottom of the page) the distance does not need to be calculated, so why does it need to be calculated now?

    Does this not hinder cross-browser and cross-resolution compatibility with a fluid layout? I can understand mathematically how calculating the distance to a destination from point a to b and then taking a percentage of that distance until the position is reach kind of makes the scrolling slower and slower towards approaching its destination. For example always taking a third of the distance between a and b until destination is reached. However calculating the initial distance is what I have not wrapped my mind round just yet. What happens when the screen resolution is higher? Will the distance be defined in px or em? I take it with your method jQuery is not being used but purely JS, am I correct?

    Quote Originally Posted by ralph.m View Post
    Hi BitCore. Welcome to the forums. Sorry we were slow to reply. We are usually pretty quick. But you are definitely in the right place.

    Yes, that's quite a nice effect, and is becoming popular these days. I have bookmarked quite a few sites that do that. They normally use jQuery, and that's probably the easiest way to do it out of the box. For example, this site

    http://grigorlawyers.com.au/

    uses jQuery ScrollTo:

    http://flesler.blogspot.com.au/2007/...yscrollto.html

    ... which I've found works quite nicely. jQuery is a different topic from the book you bought, but it's very easy to use scripts like this. You pretty much just link to the jQuery library and the special scroll script under that, as you see on the example site I linked to if you view source. (It's near the bottom of the page.)
    No worries about the time frame of replies. I am indeed very happy to have gotten this many replies so fast. Thank you all again for helping me out here. This is really truly appreciated. I will now look at the site and link provided to see if I can manage to understand how this is done.

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by BitCore View Post
    I will now look at the site and link provided to see if I can manage to understand how this is done.
    Cool. Let us know how you go. It's pretty easy, though. Firstly, make a page that works just with HTML/CSS. That is, use standard on page #links to items on the page. Then add in the link to the library and the scrollTo code, and make sure to reference the relevant ids, and you are good to go.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •