30 Tutorials and Plugins Jquery Scroll

13年前

Scroll to Top

1. Go to top of Page animat cu jQuery

Starting from the smooth scroll script developed by Ariel Flesler, Mogosanu Bogdan has built a plugin for WordPress. In the settings page of the plugin, you can customize the css, the fading speed and the minimum height in pixels before revealing the control.1

View Live Demo

2. Disappearing “Scroll to top” link with jQuery and CSS

Scroll to top links are very useful, but you never know when a user needs to jump back up. Here’s a simple to implement “scroll to top” link that only displays after the user begins scrolling”
1

View Live Demo

3. jQuery Scroll to Top Control v1.1

If your pages are long winded, it’s a good idea to provide viewers with an easy way to quickly/ automatically scroll back to the top of the page. That’s where this script comes in. It displays a stationary control at the lower right corner of the window that when clicked on gently scrolls the page back up to the top. And instead of always being visible on the user’s screen, the script lets you specify how far down the page the user is at (in pixels) before revealing the control. Nifty!1

View Live Demo

4. Use jQuery to Scroll to Bottom or Top of a Page

I had recently written about how to Use jQuery to Detect if User has Scrolled to the Bottom or Top of a Page. A DevCurry.com reader commented asking if it was also possible to use jQuery to scroll to the bottom of a page. 1

View Live Demo

5. Simple jQuery Scroll To Top Solution.

I was looking on the net for a simple scroll to top solution but I kept finding complicated solutions which required images and huge pieces of code.1

View Live Demo

6. UItoTop jQuery Plugin

Inspired by the great idea of David Walsh’s jQuery topLink Plugin, I made a similar plugin but with two key differences, this one does not require you to add extra html markup or extra plugins to function. It will only work when JavaScript is turned on ( on purpose ), It’s easy to setup with only one line of code, and it works cross-browser nicely ( Tested: IE6-8, FF, Safari ). Optionally it can benefit from the jQuery Easing plugin with a different easing animation for the page scrolling.
1

View Live Demo

Content Scroller

1. Special scroll events for jQuery

After recently considering the impact of a native DOM implementation of two possible scroll events; “scrollstop” and “scrollstart”, I eventually came to the realisation that it would probably be a bad idea. Consider these two potential events yourself – what would initiate the “scrollstop” event? – how does the browser know when a user has stopped scrolling; it can’t just fire the event on every single step of a scroll (like the native “scroll” event)…
1

View Live Demo

2. ScrollTo Posts With jQuery

Inspired by the CargoCollective and David DeSandro’s site, I asked my 推ter followers (@nickla) on how to do the scrollto posts with jQuery.
1

View Live Demo

3. 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.
1

View Live Demo

4. jquery custom content scroller

Custom scrollbar plugin utilizing jquery UI that’s fully customizable with CSS. It features vertical/horizontal scrolling, mouse-wheel support (via Brandon Aaron jquery mouse-wheel plugin), scroll easing and adjustable scrollbar height/width.
1

View Live Demo

5. How to create a jQuery Vertical Scroll

in this small example I’ll tell you how to use jQuery Vertical Scroll to create your portfolio or other.1

View Live Demo

6. jQuery Scroll Follow

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. 1

View Live Demo

7. Create Infinte scroll effect using Jquery – With Demo

On my first visit to Dzone , I was wondering about their infinite scrolling system and how it is created. Therefore I went to my colleague , javascript master , and asked him how this can be done? He looked at it and made some map in his mind , took less than 2 hours and came out with this infinite scroll plugin.1

View Live Demo

8. jQuery quickie: Unlimited Scroll using the 推ter API

Time for another relatively simple jQuery tutorial, just like my previous jQuery quickie. At work, I’m currently working with Silverlight and implemented unlimited scroll. This is a great technique that could be used on loads of websites. Instead of the regular pagination, where the user has to click to see the next page, unlimited scroll automatically loads the next page when the user is at the bottom. 1

View Live Demo

9. Making of the Contained Sticky Scroll jQuery Plugin

Last week I released a jQuery plugin that I called Contained Sticky Scroll, which you can see working on the sidebar of this blog. In this tutorial, I will be going through the code of that plugin and explaining how to write the plugin entirely from scratch!
1

View Live Demo

10. Infinite scroll : Loading content while scrolling, using Java and JQuery

Have you seen the infinite scrolling of content in some web pages? For example, in DZone.com when you scroll the page to the bottom, new links will be loaded automatically and it’ll give you the illusion that the page scrolls infinitely. Another good example is that Bing’s Image Search.
1

View Live Demo

11. Load Data while Scrolling Page Down with jQuery and PHP

This tutorial about my favorite place Dzone like data loading while page scrolling down with jQuery and PHP. We have lots of data but can not display all. This script helps you to display little data and make faster your website. Take a look at live demo and scroll down.
1

View Live Demo

12. jQuery onScrollBeyond and scrollExtend plugins – infinite scroll with ajax

The scrollExtend plugin is designed to automatically load new content at the bottom of the screen (by appending to a DOM element) when the user scrolls beyond the element, much like 非死book does with their status updates. The existing infinite scroll plugin was primarily designed to integrate with WordPress, which didn’t really suit my purposes.
1

View Live Demo

Scroll Show

1. jCarousel Lite

jCarousel Lite is a jQuery plugin that carries you on a carousel ride filled with images and HTML content. Put simply, you can navigate images and/or HTML in a carousel-style widget. It is super light weight, at about 2 KB in size, yet very flexible and customizable to fit most of our needs. 1

View Live Demo

2. jCarousel

jCarousel is a jQuery plugin for controlling a list of items in horizontal or vertical order. The items, which can be static HTML content or loaded with (or without) AJAX, can be scrolled back and forth (with or without animation).1

View Live Demo

3. Scrollable

Scrollable plugins in action1

View Live Demo

Scroll Menu

1. Scrollable Thumbs Menu with jQuery

In this tutorial we will create a fixed menu with scrollable thumbs. The idea is to have a menu fixed to the bottom of the page and let a vertical stack of thumbs appear when hovering over a menu item. The thumbs are scrollable by moving the mouse up and down which makes a really nice effect. We will add some CSS3 properties for spicing up the looks. 1

View Live Demo

2. Vertical Scroll Menu with jQuery Tutorial

Just last week, I came accross to this website Narrow Design. His scroll menu caught a lot of my attentions, I played with it for a while. Yes, unfortunately, it’s built in flash. And, Yes, we are going to implement it with jquery – javascript based scroll menu that will do the same thing. Of course, it will not be 100% the same, because some of the fancy features just not that practical to implement with javascript.1

View Live Demo

3. Creating a Floating HTML Menu Using jQuery and CSS

For all of us who deal with long web pages and need to scroll to the top for the menu, here’s a nice alternative: floating menus that move as you scroll a page. This is done using HTML, CSS and jQuery, and it’s fully W3C-compliant.
1

View Live Demo

Scroll Bar

1. Google Wave-style scroll bar jQuery plugin

Google Wave introduced a revolutionary new way of online communication and collaboration. It seemed to swiftly solve the problems inherent our current 40-year-old email system. Unfortunately, it never actually caught on.
1

View Live Demo

2. Tiny Scrollbar

Tiny Scrollbar can be used for scrolling content. It was built using the javascript jQuery library. Tiny scrollbar was designed to be a dynamic lightweight utility that gives webdesigners a powerfull way of enhancing a websites user interface.
1

View Live Demo

3. Scrollbars v2

Scrollbar Paper does not replace browser’s default scrollbar.
Instead, it covers it with a custom scrollbar, like paper on a wall: that is why it is called Scrollbar Paper :-)
The benefit of this approach is that the way browser’s default scrollbar behaves is not modified: mouse wheel support, text selection and scrolling performance are the same as usual.1

View Live Demo

4. Vertical scrollbar using jQuery UI slider

Wasted another morning messing about with the jQuery UI slider, trying to get it to work vertically rather than horizontally. Seems like quite a few others have been looking for the same thing, so here’s my attempt. I began by adapting the code on the jQuery UI site for a horizontal slider. This worked, but seemed unnecessarily complex, so I had another go, starting from the vertical slider code. The result is a lot cleaner.
1

View Live Demo

5. Rangeinput demo 4 / 4 : A custom scrollbar for a DIV

You can use the rangeinput to control other elements too. Here we use it to control scrolling of a DIV. A little more coding and you can present your products like Apple does.
1

View Live Demo

6. Plugin JQuery : Scrollbar

1

View Live Demo