|
JQuery scrolling within a Div |
||||||||
There is a demo of this here: JQuery scrolling within a Div
The idea here is to split your page content into several smaller 'bite size' chunks. Then you can add a 'more' style link at the bottom of each piece of content that will scroll down.
I'm using the smooth-scroll JQuery plugin, and the easing plugin here. The JQuery below will look for a click event on any hyperlink elements with a class of 'scrollsomething'. It will get the href value and use it to scroll to the first element with a matching id, inside the div 'scrollme'.
2<s/cript src="jquery.smooth-scroll.js" type="text/javascript"></script>
3<s/cript type="text/javascript">
4 $(document).ready(function() {
5
6 $('a.scrollsomething').click(function() {
7
8 var jumpto = $(this).attr("href");
9
10 $.smoothScroll({
11 scrollElement: $('div.scrollme'),
12 scrollTarget: jumpto
13
14 });
15 return false;
16 });
17 });
18
19</script>
Now construct your page content, and make sure that the your links to each of the next content sections have a class of 'scrollsomething' and a href value that matches the id you want it to scroll to.
2
3 <h3 id="start">First paragraph</h3>
4 Lorem ipsum dolor...<br>
5 <a href="#findme" class="scrollsomething">Next Content</a>
6
7 <div class="phat-space"><!-- --></div>
8
9 <h3 id="findme">Second paragraph</h3>
10 Lorem ipsum dolor...
11 <a href="#findme2" class="scrollsomething">Next Content</a>
12
13 <div class="phat-space"><!-- --></div>
14
15 <h3 id="findme2">Paragraph 3</h3>
16 Lorem ipsum dolor...
17 <a href="#start" class="scrollsomething">Top</a>
18
19 <div class="phat-space"><!-- --></div>
20</div>
21
22<style type="text/css">
23 .container {
24 margin: 40px auto;
25 width: 400px;
26 }
27 .scrollme {
28 height: 200px;
29 overflow: auto;
30 padding-left: 8px;
31 border: 1px solid #999;
32 }
33
34 .phat-space {display: block; height: 150px;}
35
36</style>
The good thing about this is that it will also degrade nicely, if a user has JavaScript turned off the browser will still use the old method of jumping to the named target.
Extending with Google Analytics
As you are allowing users to selectively view different content sections you could also add in a Google Analytics call within the JQuery function to track each content view as a page impression, a bit like this:
2scrollElement: $('div.scrollme'),
3scrollTarget: jumpto
4
5});
6
7pageTracker._trackPageview(jumpto);
8
9return false;
There is a demo of this here: JQuery scrolling within a Div
That looks slick! Great job!
links to each of the next content sections have a class of 'scrollsomething' and a href value that matches the id you want it to scroll to.
Firstly create a CurrencyFormatter object, and specify the currency symbol, and any other formatting parameters that you require.
Good to become visiting your weblog again, it has been months for me. Nicely this article that i've been waited for so long.
links to each of the next content sections have a class of 'scrollsomething' and a href value that matches the id you want it to scroll to.
Your site and show the kids check out up here generally. I m fairly positive there likely to be informed a great deal of new stuff here than anyone.
I m fairly positive there likely to be informed a great deal of new stuff here than anyone.
I have feel that this blog is really have all those quality that qualify a blog to be a one.I wanted to leave a little comment to support you and wish you a good continuation.
