Javascript Smooth Scroller
I am happy to share the Javascript Scroller which I created for one of my project. Javascript Scroller has been built up with combination of CSS and Javascript.
 Scroller Preview 1 |
 Scroller Preview 2 |
Examples :
Download Link
Link 1 – Link 2
Browser compatibility
Editing the width and height of Scroller
It is just simple to edit the size or any other style of Smooth Scroller.
CSS to change
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | #encFilmMain { width:160px; /* full width */ } #encFilm { height:300px; /* height */ background-color:#999; padding:5px 5px 5px 5px; } #encFilmInner { background-color:#efefef; padding:5px 5px 5px 5px; height:290px; /* height */ overflow:hidden; } |
Javascript to change
1 2 | var scrollAmount=240; // scroll amount var barHeight=290; //height |
If you like or you have any doubts, please do not forget to leave your comment.
Hai,
Really nice and usefull one. i have put that in my home page and it brightns my hoempage.
I did not see a paypal link for donation.
Better you place a link someware.
Thanks You !
Demon
great work man and I checked this one it works well thx for sharing !!!
keep up the good work
Hi,
It is very nice, actually i was looking for this to use in one of my projects.
It gives a very cool look to the web page.
Good work and keep it up
Thank You
Hi @blog Creator,
Really a nice and simple script to implement.
It allows us to change the css to our requirements.
Nice work. Thanks for this script.
Hello,
Thank for you sharing cool javascript. Only the issue is currently this code support only half version of html doctype. Please improve to work with full version of html doctype.
HTML 4.01 Transitional (full version)
Thanks,
Welcome dear Rifas,
Thanks for you to point out the bug. I resolved it now & replaced the download link. Now the code is supporting all DOCTYPE!.
HTML 4.01 Strict, Transitional, Frameset
XHTML 1.0 Strict, Transitional, Frameset
XHTML 1.1 DTD
For all the visitors who downloaded the previous code, please update your code as follows.
#encFilmInner
{
position:relative;
background-color:#efefef;
padding:5px 5px 5px 5px;
height:290px; /* Inner films height. It will be -10 from Max height */
width:140px;
overflow:hidden;
}
Two new value added to the style #encFilmInner. position:relative; and the width:xxx px;
Hello,
Very Beauty !…
But isn’t there any little bug ?
When you go down to the bottom, then you clic one time to go up : it seems it’s impossible to reach down to the bottom again.
(test on PC XP, IE, Opera, Firefox)
Thank you Janmi for the notification. I will check the problem and try to update the links and codes in the page.
Still it works in IE, Opera or Firefox without any different.
gOOD JOB broo… Very useful
Thanks
Great job! I want to use this but I have problem. I quote a question from another forum “When you click the scroll arrows quickly several times, the images display out of line. Is there a way to prevent the script from firing until the scroll is complete?”
I know the solution is adding the declaration
queue: ‘end’, but I completely don’t know where?
Could you improve this?
Thank yo.
I am not sure did you understand me, so here is link to my problem:
http://synstefana.eu/!!!!!!!!szablon_do_scroll.html
I want to the top edge of pictures on top row be always on top but if I click quickly several times the pictures are cut.
Thank you.
Regards.
well synstefana,
thank you for using Javascript Smooth Scroller.
Yes I can notice image cutting. Did you try preloding the image? This might help you out some time if I am right. If you feel that is not the right solution for your comment, let me go through the code again. Hope you will wait for me.
Thank you.
Thanks for the advice, but unfortunately preloading not solve the problem. I found a script that does not have this defect (http://www.dyn-web.com/code/scroll/), but I would like to use yours because it is more readable and understandable. If you change this you can feel free ask me for help in designing something. And, of course, like Demon says you should put somewhere a link to donate because your code is great.
Regards.
a problem occured in Firefox, if there are object element within scroller box. the videos has been shown and not hidden.
however, thanks for this good work!
Vincenzo
This is a great article. I’m new to blogging but still learning. Thanks for the great resource.
How to make it horizontal
Thanks for the Rquest Mr.Catalin.
Very soon I will provide the code for Horizontal Scroller.
Keep in touch.
Very nice.
It seems to work very well in IE, we’ll test it in other browsers.
Can you publish the code to ‘goto top’ ‘goto bottom’
I thought it would be something like
objEncNavTop=0;
scrollMe(-1);
but that and various settings of the top failed.
If we end up using it when we go live we will link to you in our credits.
Thanks again, nicely written code!
Paul
Great work!
Very useful.
I’ve tried several other vertical scrollers and this one is by far superior. Any update on the code for a horizontal scroll?
Thanks for the great work!
Thank you Coleedo.
The horizontal version will be released soon with some bug fix of current Vertical version.
Hi Muneer,
I honestly am not into scripting, but I may know a little HTML.
How would you make the pictures click-able? Like for example, if I hover my mouse over a picture and click it, it goes to a specific page.
I know you understand what I mean, I just want to express myself clearly as I am not a real techie guy. I just started blogging and building my site.
Thanks!
Yes Geoffrey, It is simple as making a hyperlink using <a href=”#”> tag. Just surround your image using the anchor tag. It will become clickable.
Hi, Thanks for making this script. This is exactly what I needed for my class project. I making my first actual website and I really wanted a nice scroll nav for my images. Keep up the good work.