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?
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.
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.
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.
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
… 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.)
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.
I don’t think it is in the book unfortunately.
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?
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.
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.
Sorry we were slow to reply. We are usually pretty quick. But you are difinitely in the right place. 