Smooth Vertical or Horizontal Page Scrolling with jQuery

In this tutorial we will create a simple smooth scrolling effect with jQuery. We will create a horizontal and a vertical website layout to show the effect. We will be using the jQuery Easing Plugin and just a few lines of jQuery. So, let’s start! The Markup The markup for our example […] View demoDownload source In this tutorial we will create a simple smooth scrolling effect with jQuery. So, let’s start! The Markup The markup for our example page is going to be very plain. The HTML is going to be the same for both examples. The CSS Since we have two examples, we will start with the horizontal page style. The main idea is to make the sections very wide and 100% in height. We need to give the body a valid height, because we want to be able to define the height 100% to the section. The style for the vertical page layout is going to look as follows: Nothing special here, just that we give a big height to the sections. Let’s add the JavaScript The JavaScript

jQuery Easing Plugin Description A jQuery plugin from GSGD to give advanced easing options. Please note, the easing function names changed in version 1.2. Please also note, you shouldn't really be hotlinking the script from this site, if you're after a CDN version you could do worse than try cdnjs.com Download Download the following: Example Click on any of the yellow headers to see the default easing method in action (I've set as easeOutBounce for the demo, just because it's obviously different). Select easing types for the demo first one for down, second one for up. The Clicker Updates 12/11/07 1.3 jQuery easing now supports a default easing mode. 04/10/07 1.2 Updated to include all methods from Robert Penners easing equations. 28/06/07 1.1.1 Updated the method to not overwrite the newly renamed 'swing', or the new 'linear' style coming in 1.1.3. 22/06/07 Rewritten the above to include callback syntax, nothing else has changed. Advertisements Need reliable hosting for your blog? Credits Donate Usage Default Custom

jQuery topLink Plugin Last week I released a snippet of code for MooTools that allowed you to fade in and out a "to the top" link on any page. Here's how to implement that functionality using jQuery. The XHTML <a href="#top" id="top-link">Top of Page</a> A simple link. The CSS A little CSS for position and style. The jQuery JavaScript You'll see that I've added jQuery's ScrollTo plugin to add some smoothness to the anchor. Please note that this version doesn't work with Internet Explorer due to IE's lack of CSS "position:fixed" support. Know of a better way to incorporate IE support? Be Heard Tip: Wrap your code in <pre> tags or link to a GitHub Gist! Older Backup Your Database into an XML File Using PHP Newer Animated AJAX Record Deletion Using jQuery

jQuery Smooth Div Scroll by Thomas Kahn - smooth content scrolling using jQuery Smooth Div Scroll is a jQuery plugin that scrolls content horizontally left or right. Smooth Touch Scroll has just been released! I have just released Smooth Touch Scroll, a slim touch version of Smooth Div Scroll. If Smooth Div Scroll is the Swiss Army Knife of smooth scrolling, Smooth Touch Scroll is the lightweight cousin, slimmed down and geared towards touch scrolling. Check out Smooth Touch Scroll att smoothtouchsroll.com Consider using Smooth Touch Scroll if you don't need the full functionality of Smooth Div Scroll and if your content is primarily for touch devices. Main features Works on touch devices like iPhone, iPad and Android smartphones. Apart from many of the other scrolling plugins that have been written for jQuery, Smooth Div Scroll does not limit the scrolling to distinct steps. Table of contents How does it work? The basic principle behind Smooth Div Scroll is simple: let one div (scrollableArea) scroll inside another div (scrollWrapper). Quick demo About me Happy scrolling!