jQuery scrollTo & localscroll Tutorial

In this tutorial you’ll learn how to make anchor links that scrolls the page smoothly using jQuery, scrollTo and localScroll.

If you have any questions, please write them in the comments below and I’ll try to help you ๐Ÿ™‚

Start with an empty html file. Give it any name you want, as long as it ends with .html or .htm.

Double click the code window to make the code easier to copy.

	My jQuery scrollTo & localscroll Demo








Inside the head tags we will have to load jQuery, scrollTo and localscroll. It’s important to do it in the order I just wrote. Since scrollTo and localscroll are plugins of jQuery, they first need jQuery to be loaded for them to work.

Copy this code into your head tag of your html document.

<!-- Load jQuery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

	<!-- Load ScrollTo --><script type="text/javascript" src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2-min.js"></script>

	<!-- Load LocalScroll -->
<script type="text/javascript" src="http://flesler-plugins.googlecode.com/files/jquery.localscroll-1.2.7-min.js"></script>

We’re now loading jQuery and the plugins directly from google. You can also save them to your computer and load them locally. If you want your html file to work offline, this is a must. Now we’re going to set up links and divs to scroll to. Pase the following into the body tag of your html document.

</pre>
<h3>Links to colored boxes</h3>
<pre>
</pre>
<div id="box-links"><a href="#box1">Link to box #1</a> <a href="#box2">Link to box #2</a> <a href="#box3">Link to box #3</a> <a href="#box4">Link to box #4</a></div>
<pre>
</pre>
<div id="box1" class="box">Box #1</div>
<pre>
</pre>
<div id="box2" class="box">Box #2</div>
<pre>
</pre>
<div id="box3" class="box">Box #3</div>
<pre>
</pre>
<div id="box4" class="box">Box #4</div>
<pre>

Let’s set up the actual script that will enable the smooth scrolling. Paste this code inside your head tag at the very bottom (above “</head>”).

	<!-- javascript that will initiate jQuery and the LocalScroll plugin --><script type="text/javascript">// <![CDATA[ // When the document is loaded... $(document).ready(function() { // Scroll the whole document $('#box-links').localScroll({ target:'body' }); }); // ]]></script>

Your document probably looks a bit dull now. Only text. We need some CSS! Put this code in your head tag as well:

<style type="text/css">

	/* CSS for the big boxes */

	.box {
		width: 300px;
		height: 300px;

		color: #fff;
		padding: 10px;

		margin: 100px 0 0 0;
	}

	#box1 {
		margin: 300px 0 0 0;
		background: blue;
	}

	#box2 {
		background: red;
	}

	#box3 {
		background: green;
	}

	#box4 {
		background: gray;
	}

	/* CSS for the small boxes that will scroll inside a div */

	#small-box-container {
		border: 1px solid black;
		padding: 20px;
		width: 300px;
		height: 200px;

		overflow: scroll;
	}

	.small-box {

		color: #fff;
		padding: 10px;

		width: 200px;
		height: 200px;
		margin: 0 0 50px 0;
	}

	#small-box1 {
		background: blue;
	}

	#small-box2 {
		background: red;
	}

	#small-box3 {
		background: green;
	}

	</style>

Now, when you click on a link. Your whole document should smoothly scroll down to a colored box.

Here’s the whole code for the html document. I’ve also added a div where you scroll to boxes inside.

	jQuery scrollTo & localscroll Demo

	<!-- Load jQuery -->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

	<!-- Load ScrollTo -->
	<script src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2-min.js"></script>

	<!-- Load LocalScroll -->
	<script src="http://flesler-plugins.googlecode.com/files/jquery.localscroll-1.2.7-min.js"></script>

	<!-- Some CSS -->
	
<style type="text/css">

	/* CSS for the big boxes */

	.box {
		width: 300px;
		height: 300px;

		color: #fff;
		padding: 10px;

		margin: 100px 0 0 0;
	}

	#box1 {
		margin: 300px 0 0 0;
		background: blue;
	}

	#box2 {
		background: red;
	}

	#box3 {
		background: green;
	}

	#box4 {
		background: gray;
	}

	/* CSS for the small boxes that will scroll inside a div */

	#small-box-container {
		border: 1px solid black;
		padding: 20px;
		width: 300px;
		height: 200px;

		overflow: scroll;
	}

	.small-box {

		color: #fff;
		padding: 10px;

		width: 200px;
		height: 200px;
		margin: 0 0 50px 0;
	}

	#small-box1 {
		background: blue;
	}

	#small-box2 {
		background: red;
	}

	#small-box3 {
		background: green;
	}

	</style>


	<!-- javascript that will initiate jQuery and the LocalScroll plugin -->
	<script>

	// When the document is loaded...
    $(document).ready(function()
	{
		// Scroll the whole document
		$('#box-links').localScroll({
		   target:'body'
		});

		// Scroll the content inside the #scroll-container div
		$('#small-box-links').localScroll({
		   target:'#small-box-container'
		});

	});
    </script></pre>
<h1>A very simple jQuery LocalScroll Demo</h1>
<h3>Scroll inside a div</h3>
<div id="small-box-links">

	<a href="#small-box1">Link to small-box #1</a>
	<a href="#small-box2">Link to small-box #2</a>
	<a href="#small-box3">Link to small-box #3</a></div>
<div id="small-box-container">
<div id="small-box1" class="small-box">Small-Box #1</div>
<div id="small-box2" class="small-box">Small-Box #2</div>
<div id="small-box3" class="small-box">Small-Box #3</div>
</div>

<hr />

<h3>Links to colored boxes</h3>
<div id="box-links">

	<a href="#box1">Link to box #1</a>
	<a href="#box2">Link to box #2</a>
	<a href="#box3">Link to box #3</a>
	<a href="#box4">Link to box #4</a></div>
<div id="box1" class="box">Box #1</div>
<div id="box2" class="box">Box #2</div>
<div id="box3" class="box">Box #3</div>
<div id="box4" class="box">Box #4</div>
<pre>





I hope you found this tutorial useful. If you have trouble getting it to work, please write your questions in the comments below. Cheers!

I’ve written a new tutorial on making a simple “scroll to the top button”. If you liked this tutorial I think you’ll like the new one as well ๐Ÿ™‚

206 Replies to “jQuery scrollTo & localscroll Tutorial”

  1. Y have this error in scrollto js file “ncaught TypeError: Cannot read property ‘safari’ of undefined” , This doesยดnt work for current versions of javascript?

  2. @adriantomic
    Thanks for really very nice topic…

    can we trigger dynamically to local scroll function?

    If possible please explain because i want to bind local scroll with key events (press of up and down arrow events)
    Thanks…. ๐Ÿ™‚

  3. Many thanks for examples. It is not at all clear from the official docs that the target must be ‘body’ when scrolling all over the page.

    1. It’s a very good discussion. This blog post is almost 80% of the traffic to my site ๐Ÿ™‚

      I think what you want is to have the different sections of the page to be 100% of the page height. Have you tried this: .section { height: 100vh; }

      I got it from here.

  4. For some reason, after I implemented localScroll, the links/anchors stopped working. I’ve checked everything many times and can’t figure out what’s wrong. The links work if I delete localScroll, but when I put it back in, they don’t work. Please help me! I’m a complete beginner at this, and I don’t know what’s wrong. (The website above is a link to the actual code of the demo.)

  5. Hey Adrian,
    I want to use this localscroll functionality in my website. I already have template for that page that includes header and footer. I want them to be fixed and want to scroll my other content.
    I have one example related to What I want. Here is the link – http://sbrio14.com.br/
    I want my page to be somehow similar to this. Can you help me in creating this type of functionality of scroll.
    You can observe there is no header and footer but I want them and want the title head to float like that in the link.

    Please help me out. I tried a lot but its not working.
    Thanks!

  6. Its working like 50% of it. From what version of JQuery does this work? We are still using version 1.3.2 with a Script manager is asp.net. The plugin is distorting something and I cannot figure out what?

  7. Hi,

    I got mine to work, thanks for the tutorial. But right now, instead of having a scrolling animated feel, it just jumps to the div element. How do i solve that?

        1. So it seems to work with the offset and everything only that my links aren’t working anymore and don’t know why… Thank you so much, you are really saving my life ๐Ÿ™‚

  8. Hey there! I’ve been trying to find a plugin like this for a while now. However, I don’t seem to be able to set it up. It simply won’t scroll to the divs and I also need an offset to it. SO here’s what I got:

    and

    //

    in the head

    Now my a href’s all have a class .scroll and they are linking to divs with ids. However, this does not seem to work. Any idea why?

    Thank you

  9. How do I get this to work when linking to a separate page. I have the scrolling working in general, but only if the link is on the same page. Is there a way to disable the browser’s default behavior when the page loads, then scroll smoothly to the selected ID?

  10. This was exactly what I needed!! Thank you so much for this tutorial. It worked beautifully.

    I’m using this for a side project site called The Art of Print Production. While it’s not done yet, feel free to check it out. Next step is to figure out how to get the navigation buttons centered vertically to the right and fixed while scrolling. If you have any tips, please share. ๐Ÿ™‚

    Thanks again!!

  11. Hi Adrian, Is there any difference between scrollto and localscrollto?
    or what the need to put both js library? Is scroll to is enough to create

    1. Hi Naveen!

      There is a difference. ScrollTo is the base jQuery plugin. LocalScroll is an extension of ScrollTo which makes it easier to implement the simple links I show in this tutorial.

      That is also why you have to put ScrollTo before LocalScroll in the code.

  12. Thanks ,…and i have a problem.
    wo use
    $(‘#nav’).localScroll(800);
    in my document, and it work perfect in ie9+ and firefox….but in chrome,it is not work.. and evenscroll anymore..so wo delete it, and it can scroll ,but that is not Effect of buffer๏ผŒcan u help me?

    B.R.

  13. Hello and thanks for the great tutorial.
    I have a simple question, what should I do in order for the boxes to scroll like in your tutorial, but with a 180px margin on the top ? So that the boxes aren’t “glued” to the top of the page once scrolled to ? Thank you !

  14. Hi Adrian – the end result of this tutorial is exactly what I’m looking for to make content scroll on a link. I’m planning to mess around with your css to fit my content.

    Here’s my website:
    http://violetoeuvre.com/

    I’d like to make links in the writing section to scroll to content within this div (just like the “Scroll within a div” part of your tutorial!). I copied and pasted your code exactly into a test page on the site, http://violetoeuvre.com/scroll.html, to fiddle, but it’s not doing the effect. I think it should work because your code is self-referential within one page (my html references another css file).

    Any help would be appreciated!

    Thanks.
    Claire

    1. Hi Claire!

      The code on your test page (scroll.html) works fine. The problem is that the container-boxes are to short. If you want the window to be able to scroll down to “other” then you have to make it taller.

      Edit the css for .small-box and add “height: 600px;” or “min-height: 600px;) and it should work ๐Ÿ™‚

      1. Hi Adrian – thanks! I am new to this. I loved the tutorial and knew it was exactly what I needed. If you could help me with one more thing I’d really appreciate it. I’ve edited the text a bit, and would like to put the whole scrolling section into the larger writing section on the homepage, violetoeuvre.com.

        (The script is at violetoeuvre.com/scroll.html)

        However, when I move the part with the tutorial, the scrolling effect just disappears, and I can’t figure that out. I copied the script to the head, the css to my own css page, and the html to the writing div.

        Do your divs / ids interfere with mine? Should I be able to just nest everything?

        Thank you!
        Claire

  15. Thanks for the tutorial. I was having problems with this for a while. I finally figured out that it doesn’t work for me with jQuery 1.9.1 but it does with 1.5.1 that is used in this tutorial. Any reason for that? Thanks

  16. Hey Adrian,

    Thanks for the tutorial. When I copy the entire code into an html file, no css appears and none of the links work. I tried it with the .js files stored locally but it still doesn’t work. I tried to implement it on another page, with just a very basic example, the scrolling never happens, the page just jumps to the div specified by the link. I’ve been toying with it for a while now, and I have no idea why it won’t work. Any ideas?

    1. I think it might be due to an issue with a conflict with another jquery plugin (lazy line painter for SVG path animation) I’m using on the same page…I noticed that when I add the doc ready function into my main.js file, it suddenly prevents the line animations from executing. The data / attributes for the line animations are also contained within doc ready functions, and execute after an onclick event.
      The main.js file currently has the localscroll dom ready function in it, which prevents the lines from drawing after the onclick, whereas when I delete it, it works.
      here are the main.js and html files:
      http://pastebin.com/smheWAJ3
      http://pastebin.com/BdTTgXTu

      If you can spare a minute, I’d greatly appreciate the help…I’ve been stuck on this for hours and I don’t know what else to try.
      Thanks

      1. Hi Philip!

        Do you think you could put your code on a server somewhere? I can’t run it locally on my computer since I’m missing some resources in your document.

        Some errors I can see in your code:
        The functions aboutanim() and projectsanim() do not have closing brackets by the way.
        You are also missing a comma on line 80.
        You don’t need two $(document).ready functions.

        I did some cleanup of your js code.
        http://pastebin.com/JN8bqPUH

    1. Hi Pankaj!

      Please paste the code you already have on pastebin.com or put it on a live server somewhere. Your question is a bit too general for me to answer ๐Ÿ™‚

  17. Hi,

    Very clear and straightforward tutorial, easy to follow but just can’t get over this hurdle.

    I’m not using the minified version, but linking to them on a directory rather than to a hosted version. Also using along with Bootstrap – this loads in the .js scripts from an index folder (not sure if there’s any conflict here)

    Anyhow I keep getting this:

    TypeError: $(…).localScroll is not a function

    Not sure if the problem is the class/id name of the links is causing the error?
    Are the scripts not loading correctly?

    Any help would be greatly appreciated.

    Code here: http://www.10on12.com/sandbox/projects.html

    S

    1. Hi Stephen!

      It seems like the scripts are loaded correctly. However, they might not be loaded in the correct order.

      1. Load jquery (correct)
      2. Load ScrollTo plugin
      3. Load localScroll plugin

      In your code, you are loading the localScroll plugin before the ScrollTo. Try switching them around, since the localScroll plugin is an extension of the ScrollTo plugin.

      1. Hi Adrian,

        thanks for the quick response!
        Tried that but still hitting the same error.

        Web Console keeps highlighting “target:’body'” as the offending piece of code – which makes me think it’s not targeting the page correctly?

        Would there be anything in this?

        Again – any help appreciated.

        S

        1. Adrian,

          cracked it. Must be a Bootstrap thing.
          They load all their scripts at the bottom of the page just before the tag.

          I moved all ScrollTo scripts below the Bootstrap specific stuff.
          Works fine now!
          Maybe one for Bootstrappers to look out for in future.

          Oh – one last thing – how would I attach the ScrollTo script to the small arrow to take me back up to the top?
          It’s not part of the ‘nav’ section at the top of the page – do I call the script again for this part of the navigation?

          Thanks again for the help.

          S

          1. Ok – just to update – all working now.

            Links to scroll you down – also the script attached to the arrow to scroll back to the top of the page.


            //

            Thansks again for the tutorial.

    1. It can be a number of different problems. Try using Google Chrome, and go to View -> Developer -> Developer tools. Click the Network tab. Reload the page and see if you get any errors and that the javascript files are loading correctly.

      1. It seems to have fixed itself.

        Thanks for your speedy response and introducing me to this network tool. Need to do some image optimisation by the looks of it.

  18. Hi,

    How can I fix the last box so it moves up to the top like the other boxes do? – all the others go to top:0, left:0. However, the last one is always positioned further down the page when scrolled?
    Thanks

    1. I think the reason the box is positioned further down the page is because the page cannot scroll further down because there isn’t any space left to scroll. You need to make more space below the last box. Try adding a bottom padding to the body tag about 500 pixels.

  19. Thank you for the tutorial. It was easy to follow.
    I had only the problem, that it didn’t move smoothly down.
    As you wrote, I past the style in the head. And also if past
    and copy the whole code from your last example, I can’t
    see any css.

    Have you any idea? thank you. ๐Ÿ™‚

  20. Great Tutorial! The problem is that when I place in the code:

    // When the document is loaded...
    $(document).ready(function()
    {
    // Scroll the whole document
    $('#copy-main').localScroll({
    target:'body'
    });

    });

    it removes the tab content and disables the tabs. I belive the scroll functon is working. I’ve been struggling with fixing this for ages, but my lack of jQuery understanding is creating a losing battle. The test page URL is: http://www.davidkneale.com/wcusa/expedition_leader_scroll.html

    Any help would be much appreciated!!

    1. Hi David! Glad you like my tutorial ๐Ÿ™‚

      I looked at your site and I get the following javascript error: Uncaught TypeError: Object [object Object] has no method ‘localScroll’
      There might be a problem when you load your scrollTo and localScroll script files. On line 34 (
      ) in your source you are loading localscroll again when you are loading it just a few rows up. Delete line 34.

      You also need to put in some content so the page inside your browser can scroll. On your test page url, there is no content.

      Now, to your javascript code. Your navigation links resides in the ul which has the class “tabs”. Try this:


      // When the document is loaded...
      $(document).ready(function()
      {
      // Scroll the whole document
      $('.tabs').localScroll({
      target:'body'
      });

      });

      If that doesn’t work, try giving each of your tab links (#tab1) a class of “tablink”. Then try this code:


      // When the document is loaded...
      $(document).ready(function()
      {
      // Scroll the whole document
      $('.tablink').localScroll({
      target:'body'
      });

      });

      Good luck! ๐Ÿ™‚

      1. Thanks for that! Brilliant. Another problem that has me stumped is when using with accordions, whereby clicking on the accordion panel sends it to the top of the browser window where it opens. The problem is that my accordion is very deep, so I need to reference each accordion DIV or anchor in the ready(function() to have it go to the top of the browser, which doesn’t work. Do you have any tips for this kind of use? The dev URL is:
        Thanks!

  21. on iOS devices (don’t have an Android to test on) with the main nav links in fixed position div, only the first click functions. Then you must scroll the page with a finger touch in order to restore clickability. Do you know of a workaround for this?
    Thanks

  22. Hi,
    Thanks for the great tutorial.

    I am using the scrollto effect to scroll down to a specif div on the page – however because i have a fixed menu at the top of the page (height:100px;) it tends to cover the first 100px of the div i scroll down to.

    Is there any way to scroll down to 100px above the div? this way my menu will not block the first 100px of the div i scroll down to.

    thanks,
    Sunny

    1. You can use the “offset” setting. It can be positive or negative. I think in your case, it should be negative.

      offset: Number or hash {left: x, top:y }. This will be added to the final position(can be negative).

      Like this:


      $('#div').localScroll({
      offset: -100px,
      });

      1. Okay, I feel like a dolt. I’m trying to accomplish the offset as well and when I try to add it in the head section of the html page, it kills the animation and doesn’t perform the offset. I’ve tried

        $(‘#scroll-links’).localScroll({
        target: ‘body’,
        offset: -100px
        });

        As well as

        $(‘#scroll-links’).localScroll({
        offset: -100px
        });

        Tried it with and without the comma after -100px. No love. Am I supposed to put this into one of the .js files? Or did I get the naming wrong somehow?

        Thanks so much for putting this out there and answering our questions.

        1. Hi Alexis!

          I think I made a mistake last time I answered your question. Sorry for that. It seems that you should not use “px” in the offset setting.

          Try removing “px” after the offset number. So instead of -100px, just have -100.

          If that doesn’t work. Define the offset as a “hasch” like this:
          offset: {top:-100, left:0}

          Your code should look like this:

          $(โ€˜#scroll-linksโ€™).localScroll({
          target: โ€˜bodyโ€™,
          offset: -100
          });

          or like this:

          $(โ€˜#scroll-linksโ€™).localScroll({
          target: โ€˜bodyโ€™,
          offset: {top:-100, left:0}
          });

          Hope it works out for you ๐Ÿ™‚

          There’s a demo of more options here.

  23. Hi,

    Wondering how can you make the nav links become active when you mousescroll or using the scrollbar to move up and down the page. So you have the choice of either clicking the links to scroll or manually scrolling and depend on where you are on page active link lights up.

    1. Hi!

      It is possible to do what you want to do, but I don’t have time to show you the code. One way you can do it is to use a function that detects when the user scrolls (scroll()). Inside that function you check which div is closest (in the viewport) and then you highlight the navigation links accordingly (using addClass() and removeClass()).

      Another easier way is to use a plugin which checks if an element (div) is inside the viewport. Viewport Selectors for jQuery.

      I hope this helps, sorry I don’t have time to explain it in more detail.

  24. I’ve got the localscroll working just fine and positioning correctly if the “target” is on the same page. However, if I’m going to a “target” on a different page (not just a different div) I can’t get it to position the new location just below my fixed graphic header. Any ideas what I need to try?

    1. Localscroll has a function called $.localScroll.hash().

      The plugin also adds a function, $.localScroll.hash() , that checks the URL in the address bar, and if there’s a hash(#an_id), it will scroll to the element. It accepts a hash of settings, just like $.localScroll. You will likely call it on document ready. Check the regular example to see it in action.

      I have not tried it, but I think it’s what you need to use. When you click an anchor link that is on a new page (browser page reload) the browser URL should look something like this: http://www.yoursite.com/index.html#anchorlink. The $.localScroll.hash() should pick up on this and scoll. Good luck. Hope it works ๐Ÿ™‚ Please write to me if it doesn’t.

      1. Hi Adrian,

        I have same problem. I am using this code:

        jQuery(document).ready(function($) {
        $.localScroll({
        duration: 800,
        target:’body’,
        offset: -85
        });
        });

        It’s working great if i click link on same page. If i have a link http://www.mysite.com/index.html#thirddiv
        it does not work.

        I have added this code too,

        jQuery(document).ready(function($) {
        $.localScroll.hash({
        duration: 800,
        target:’body’,
        offset: -85
        })
        });

        It still does not work. Actually when page load, it scroll but there is a 85px margin difference problem.

  25. Is there a way of setting the page to open at a specified div or height for example at box 3 in the middle as opposed to the top and then scroll as normal from this point?

  26. Hi,
    I need content slides horizontally.
    how do it?

    css: #small-box-container {
    border: 1px solid black;
    padding: 20px;
    height:200px;
    width:100px;
    position:relative;
    float:left;
    overflow-x: scroll;
    }
    and
    $(‘#small-box-links’).localScroll({
    target:’#small-box-container’,
    axis:’x’
    });

    but not working why?

    1. You are right in putting the axis to x. But you also need to position the boxes in inside the scrolling area horizontally (by using float: left). You also have to make the area containing the boxes wider (so the boxes will position themselves next to each other).

    1. Thank you! ๐Ÿ™‚ It’s been a while since I wrote that tutorial and I’m thinking about writing some more. Do you have any ideas of what that might be? Is there a plugin or some other javascript problem you want to learn about?

      1. Hey there. Funnily enough, I would also be interested in learning about the fixed ‘back to top’ tag (like the one on your site), but this may be too similar?
        Also, while I’m here, while testing I’ve realised that the scroll doesn’t work in Firefox on OSX. Is this a known bug or could I be doing something wrong?
        Thanks again ๐Ÿ™‚

          1. Hi there
            Just to say: I have tested it in Safari on localhost and it works fine. So I think it may just be file:// that it doesn’t recognize.
            A wee update there!
            Ta

    1. ok thanks – thats a good start for research – its working in IE now but not Firefox – I’ll keep at it

      Cheeers

  27. Hi there – love what you’ve done but I’m experiencing some problems with IE and Safari – i have a series of divs which are positioned absolutely in a grid – the animation works fine in Chrome but jumps in IE and Safari – any ideas

    Many thanks
    Al

  28. Hi there, just wondering if you could help an issue I am having…

    I want to scroll to a absolute positioned div… however when I click the link it just snaps straight to it.

    I’ve put the important parts of my code below (I’ve missed out the stuff you need to make it work to save space)

    CSS:
    body{margin:0;font-size:13px;line-height:1.231;background:#161616}
    #mainScreen{position:absolute;margin-left:0%; width:100%; height:100%;}
    #Basket1{position:absolute;margin-left:100%; width:100%; height:100%;}

    The script:

    $(document).ready(function(){
    $('#ScrollLinks').localScroll({target:'body', axis:'x'});
    });

    The HTML

    Link to Page 1

    Page 1

    1. In your javascript, you assign localscroll to work on links that have the ID of “#ScrollLinks”. You need to set the ID of the link to scroll links so localscroll knows what link you want it to animate.

      Change the link to:

      <a href="#Basket1" id="ScrollLinks" rel="nofollow">Link to Page 1</a>

      Better yet, don’t use an ID, but a class instead. ID’s are only supposed to be used once per page, and I guess you might want to have multiple links that use localscroll ๐Ÿ™‚

      Like this:

      <a href="#Basket1" class="ScrollLinks" rel="nofollow">Link to Page 1</a>

      Now you have to remember to change the javascript code as well. So it points to .ScrollLinks, instead of #ScrollLinks.

      Like this:

      $(document).ready(function(){
      $('.ScrollLinks').localScroll({target:'body', axis:'x'});
      });
      
      1. Thanks for the swift reply!

        Unfortunately I am still suffering the same issue… is there somewhere I could post the full code? Maybe there is something I have missed or added incorrectly?

        Thanks again,

        Ben

          1. I’ve tried everything now. It doesn’t seem to be anything wrong with the code, but I can’t get it to work. One issue might be the positioning of the divs. Try floating the mainscreen and the basket1 divs to the left of each other, instead of using margin to offset them.

          2. ah well, very strange… annoyingly using IE7 so float doesnt work…

            Trying to think of another way of setting it all out but nothing springs to mind.

            Suppose I could align the site differently… maybe use a vertical scroll instead.

            B

          3. cant edit that last post… I meant that I cant get float working… dont know why I mentioned IE7 :S

  29. Hey,

    I’m hoping you get this before my website’s due date! I’ve been trying to implement Fleser’s local scroll for some time now. Came across your tutorial- it’s awesome and seems simple, but the plugin just won’t work for my site. I followed everything step by step… jQuery is working on my page. I’ll write back with the html if you’re free to help.

    Thanks!!
    Alexa

      1. Thanks so much for the response! I’ve listed my site this time. I can also upload my html and css to pastebin. I think the problem has something to do with the other plugin on my site, but am not sure.. Again, thanks for taking the time to look at this! it’s very much appreciated!!

        1. Hi!

          You are loading jQuery twice. Look in your

          after this code:

          Regarding the localscroll script. I can see that the about-link is working, but not the work-link.

          You have do not have any anchor named #workbox, that is why the work-link doesn’t scroll when you click it.

          1. Yeah, i’ve been able to make the links jump to the anchors just fine. But they aren’t “scrolling”. Just wondering if I need to tweak the settings? I’m looking for that speed that you have on your page.

  30. Hello,superb tutorial !

    I would like to know how apply localscroll to other divs,not only to the box-links div.
    Sorry if itยดs a nob question

    Thanks a lot

    1. Thank you! ๐Ÿ™‚

      If you want to use localscroll on other divs, you just change the target container id to whatever container you’d like to have scroll in. If you want to scroll multiple containers, you have to repeat the code, but with different target id’s. If that doesn’t answer your question, please send me a better description of what you want to do. I might be able to give you a better example.

  31. Hi Adrian,

    I am trying to get the plugin to work so that when a page is loaded that has a #id at the end, it loads the page then smooth scrolls down to it, rather than just loading the page already at the anchor point. From what I gather it can be done using localScroll, but I just can’t seem to work out how to do it.

    Any help would be greatly appreciated.

    Cheers

    Chris

    1. Hello Chris!

      You might not need localscroll for this. Try:

      $('html,body').animate({scrollTop: $("#elementid").offset().top},'slow');

      When the above code runs. It will scroll the page to the element with the id of #elementid.

      Hope it works. Cheers!

      1. Hi Andrew,

        Thanks for your reply.

        What you have suggested does work, sort of. What I am trying to do is have a drop down menu so you can select a sub section of a page from anywhere on the site, and it would load the page, then smooth scroll down to that anchor. However what currently happens is it just jumps straight to the anchor. What you have suggested requires an ID to be defined on the load of each page, which is unknown as the user could click any link from anywhere.

        Any ideas?

        Cheers

        Chris

        1. Ok, I think I understand what you want to do.

          You need to get the anchor from the url. When a user clicks the drop down menu, the browser will go to an URL like this: http://www.test.com/#anchor.
          So you need to get the #anchor and animate to it when the page loads.

          Use window.location.hash to get the anchor hash.

          You can try it out and see if it works like this: alert(window.location.hash);

          Store the hash in a variable. Use the earlier code I posted to scroll to the variable which has stored the hasch.

          Something like this:


          // Get the current hash of the page and store it in a variable
          var currentHash = window.location.hash;

          // Scroll down to the current hash using the variable we just created
          $('html,body').animate({scrollTop: $(currentHash).offset().top},'slow');

          1. You have it spot on what I am trying to achieve, and what you have suggested is what I thought might work, however it would seem that the default action of the browser to take you straight to the anchor link overwrites the script, so that when you click the link, it loads the page directly at the section that has the anchor.

            Ill have a play around see if I can solve it, but any ideas would be appreciated.

            Cheers

            Chris

  32. Adrian,
    It seems when i plug in options like axis, duration, and queue they work fine. Does easing work or am I just specifying the option wrong?
    Thanks in advance!

  33. Hi
    I’ve been trying to implement localScroll for ages, and I can’t seem to make it work ๐Ÿ˜

    It works fine if I want to scroll the whole page, but i DONT :]
    I just want to scroll divs inside #okvirCONTENT (so the page stays centered on the screen while the content DIV-s scroll ๐Ÿ˜ …I’m not kidding – I’ve been trying to do this for months :/
    please help:::
    here is the link –>http://dl.dropbox.com/u/7166661/insWins/index4.html

    1. Hello!

      If I understand you correctly, you want the page content to scroll inside a div. Set #okvir to overflow: auto;
      In the javascript set the target: #okvir. Set axis to x.

      Not sure if this works, but you might be able to go from here. Good luck!

  34. Tried everything….quadruple checked everything….no scroll……any help that can be given I would greatly appreciate?!?!

    1. I need some more specificts. Does jQuery load in your site. Write an alert("Working!"); in your javascript file to check if jQuery is loaded. Use developer tools in Chrome or the Firebug extension to Firefox to see if there are any javscript errors.

      1. Jquery is loaded, still no scroll. Code is the exact same (except for my divs are named navigation). Still lost. Thank you so much for the fast response….

  35. Hi Adrian!

    First of all, thank you so much for this tutorial. I’m just starting out in web design and i was really struggling with this jquery library until i found this clear explanation!

    However, i’m having trouble getting it to scroll horizontally. I was pulling my hair out for ages, but now i’m accepting defeat and turning to a pro! The page in question is here

    I have got it working vertically, but due to the links being at the bottom of the page, it looks a little awkward. I wanted to have them slide from off the page (so they dont just appear from an invisible line) but no matter what i tried it wouldn’t work. Any ideas?

    Thanks in advance,

    Rob

    1. I’m glad you like my tutorial ๐Ÿ™‚

      I visited your site. Looks good! If you want the site to scroll horizontally, you first need to place the (.box) div’s horizontally. Change the width of the #content div to something like 4000px. Now you’ll see that the .box divs are side by side.
      Now for the javascript. I think you need to specify which axis to scroll. Since we want to scroll horizontally the axis is “x”. So just add axis: ‘x’ to your localscroll options. Like this:

      $(‘#links’).localScroll({
      ย ย ย ย ย ย ย ย ย ย ย target:’#content’,
      axis:’x’
      ย ย ย ย ย ย ย ย });

      Hope it works now ๐Ÿ™‚

      1. I tried this before, but it doesn’t seem to work. I’ve updated the css and html like you said and put it online, but the div’s just sit there. The links won’t make it scroll along ๐Ÿ™

  36. I was just wondering if you could slow down the speed to make it scroll more smoothly i am working on a project using this and seems to scroll too fast it almost seems like a jump but it isn’t. Any help on this would be greatly appreciated.

    1. If the animation is instant, you might have some problem with your code. If it’s too fast, you might want to change the speed of the animation. The setting is duration: and the time value is in microseconds. So if you want the scroll duration to be 2 seconds, put duration: 2000.

      1. Hi Adrian, sorry for the late response but thanks for your help, I really appreciate it. I tried to implement what you said into my code but I cannot figure out where to put the line “duration: 2000” on. It works fine without the extra line although its still too fast for what I’m trying to do. So when I put the duration line I put it in the only place I could think of which was underneath the “target: ‘body'” line. The problem is when I do, the script doesn’t work anymore and just jumps to the anchor. I’m not sure where that line is supposed to go because I don’t see any other place to put it… or maybe I’m not looking hard enough. If you could show me where or how to insert the line it would help me a lot and finally put an end to my dilemma. (I’ve been on and off on this for a week) Thanks again in advance for your help.

        1. I think you might have forgotten to put a comma after the target line.

          Try this code (change the settings so it works on your site):

          $(‘body’).localScroll({
          target: ‘#content’,
          duration: 2000
          });

          If it doesn’t work. Please post a link to your code. You can put the code on pastebin.com. Cheers!

          1. Oh man… I tried it with a semicolon but it was supposed to be a comma… I don’t know why I didn’t try that. Programming was never a strong point for me as you can probably tell. I inserted the comma and everything works as I needed it to. Thanks again for taking the time to help. You helped me out BIG TIME. I’m bookmarking your site for future reference. Thanks Again!

  37. Adrian, thanks for the script.
    I wonder if it’s possible not having a height for #small-box-container and having the small-box always scroll to the top of #small-box-container.
    Now if you don’t define a height for #small-box-container it’s not “working”.
    Regards, Francois

    1. If there’s no height on the #small-box-container, there will be no scroll bars, and thus, the localscroll script wont work.

  38. I have created the following page http://kylehouston.com/testing/localscroll/ where I have a number of main links and then sublinks for these. At the moment when a main link is clicked the content scrolls vertically and when a sublink is clicked eg Blue Inner Link 1 the content slides horizontally.

    My question is how can I update the script so that when I click a main link the content scrolls horizontally and when I click a sublink the content scrolls vertically?

    Thanks Kyle

    1. If you are using scrollTo. Set the axis to X (for horizontal scrolling) or Y for vertical scrolling.

      $(...).scrollTo( 'li:eq(15)', 1000, {axis:'x'} );//only scroll on this axis (can be x, y, xy or yx)

  39. He he he, I found the problem: the notorious “hash: true” in the jscript was treating the element as it would a window.

    I changed it to “false”. I should have read the manuals in depth before screaming.
    Thanks a lot.

  40. Good tutorial. I seem to be having a slight problem though. I use the localto, targeting a div, every animation works fine, but it moves the whole page a nudge to the top, like the old fashioned #top.

    Any help..?

        1. I’ve done a quick demo for the future tutorial on scrolling x and y with jquery scrollTo.
          http://adriantomic.se/scrollTo/

          Things are a bit different this time. I am using scrollTo instead of localScroll to scroll to the divs. I’ve set up a click function for the links. I’ve commented the code so I hope that helps.

          1. Heya – thanks so much for this. On that link though they seem to jump from one box to the other rather than scroll… could that be my computer?…

          2. so weird, it’s still jumping. I quit firefox and tried reloading, also emptied cache? strange… I will try it on a computer at uni when I get there today. thanks so much for your help!

          3. Do you still have the problem with it jumping? I’ve tried the demo on my friends computer, and it works fine.

  41. I think you’re having issues with your code snippets. It’s displaying a large gray box instead of code (FF and Chrome).

  42. I’m to use localScroll to scroll to a specified anchor on load, therefore in the onload function.

    I’m struggling…

    1. Have you made sure that localScroll works on any other links?

      This should be the only thing you would put in your code (the dots are where your options go):

      $(document).ready(function () {
      $(‘#myAnchor’).scrollTo(…);

      });

      You could also use a normal jquery animate function to do it: http://djpate.com/2009/10/07/animated-scroll-to-anchorid-function-with-jquery/

      Hope it works out for you ๐Ÿ™‚

      BTW: I’m redesigning my site and we’ll be writing a new up to date localscroll tutorial with example files.

  43. hi m8, i just included the js files into the html but nothing happens.
    i just put two links on a page and it doesn’t scroll between. what i’m missing? ๐Ÿ™

Leave a Reply

Your email address will not be published. Required fields are marked *