Create a Vertical, Horizontal and Diagonal Sliding Content Websi

Introduction Content Sliding website is one of the famous and creative design techniques for portfolio website. One thing, please make sure you put the menu on every single page to avoid confusion/dizziness. You should put the navigation menu in every single pageOr, fix the position of the menuLet your visitors know exactly what section they're reading, like highlight the selected menu item and have a clear title In this tutorial, we will learn to scroll your web content vertically, horizontally and plus diagonally! And, thanks to Ariel Flesler, his scrollTo plugin is simply amazing! Advertisement Depend on which direction you want to scroll your website, each of them have slightly different layout. I put <a name="name"></a>, just in case some of the browsers out there don't support javascript. Scroll Horizontally & Vertically Scroll Diagonally The CSS is basically almost the same with the tabbed based content slider tutorial. Scroll Horizontally & Diagonally Scroll Vertically 3. Vertical Update

jQuery Smooth Div Scroll by Thomas Kahn Animated Scrolling with jQuery 1.2 » Learning jQuery - Tips, Tec A few weeks ago I wrote about how to use jQuery and a couple modules from the Interface plugin suite to automatically have same-page links scroll to their target location when clicked (Animated Scrolling for Same-Page Links). Well, now that jQuery 1.2 is out, and I've successfully upgraded this site to it without a hitch, we can do the same thing with jQuery core alone. Here is what the code looks like with the minor change: JavaScript: $(document).ready(function(){ $('a[href*=#]').click(function(){ if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var $target = $(this.hash); $target = $target.length && $target || $('[name='+this.hash.slice(1)+']'); if ($target.length) {var targetOffset = $target.offset().top; $('html,body') return false; } } });}); Not a bad little adjustment when you consider that we're able to get rid of a plugin dependency. var targetOffset = $target.offset().top; Ease on down the page Update

Open Source - Scroll Follow - The Kitchen @ Net Perspective Overview Scroll Follow is a simple jQuery plugin that enables a DOM object to follow the page as the user scrolls. Scroll Follow has been successfully tested on IE6, IE7, FF2, FF3, Safari 3, and Opera 9 on Windows. It has been successfully tested on FF3 and Safari 3 on MacOSX. Requirements jQuery (tested with 1.2.6) jQuery UI Core (tested with 1.5.2) Optional Installation Parameters • speed int - default: 500 The duration of the sliding animation (in milliseconds). • easing string - default: 'linear' If included, use any one of the easing options from the easing plugin. • offset int - default: 0 Number of pixels the Scroll Follow object should remain from top of viewport. • container string - default: object's immediate parent ID of the containing div. • killSwitch string - default: 'killSwitch' ID of the On/Off toggle element. • onText string - default: 'Turn Slide Off' killSwitch text to be displayed if sliding is enabled. • offText • relativeTo • delay History • October 29, 2008 - Version 0.4.0

jQuery.ScrollTo Notice I've pretty much stopped updating this blog, but the plugin development is still on-going. You can find the link to the Github project page at the bottom of the article. Introduction An article about animated scrolling with jQuery inspired me to make a small, customizable plugin for scrolling elements, or the window itself. How to specify what to scroll ? Simple, all the matched elements will be scrolled, for example: $('div.pane').scrollTo(); If you need to scroll the window (screen), then use: $.scrollTo(); How to specify where ? Settings Getting the real scrollable element out of a node In order to find the real element whose attributes will be animated, you need to call $.fn. $(window). Manually finding the scrolling limit ScrollTo always had an internal function that calculates the scrolling limit for both axes. Overloading This plugin accepts the arguments in two ways, like $.animate(). $().scrollTo( , , ); $().scrollTo( , ); In this second case, you can specify the duration in the hash.

jQuery.LocalScroll Notice I've pretty much stopped updating this blog, but the plugin development is still on-going. You can find the link to the Github project page at the bottom of the article. What does this plugin do ? This plugin will animate a regular anchor navigation [1] [2]. Each time a link is clicked, the element you decide(can be the whole screen), will gradually scroll to the targeted element, instead of "jumping" as it'd normally do.jQuery.ScrollTo is used for the animation. How to implement it ? That's easy! <a href="#the_id">your_text</a> Let's call these "local links". So if (for example) you have a div with id "navigation" and the local links are inside. $('#navigation').localScroll(); If your links are all spread, you can use: $.localScroll(); That gets all the local links in the page. Settings targetWhat to scroll (selector, DOMElement, or jQuery Object). How do I use the settings ? Instead of the window, an element with id 'content' will be scrolled. Troubleshooting Strange things happen Links