Animate page to id with jQuery
Animated page scrolling to specific id within the document with jquery. Article contains a jquery plugin you can use for simple “back to top” links or complex single-page websites menus, a ready to use WordPress plugin, as well as a single-page CSS template with additional features. Plugin features include smart animation speed and easing, vertical and horizontal scrolling and support for deep linking.
Page scroll to id plugin
Plugin version: 1.2
Download the archive which contains the plugin files, as well as examples and a single-page css template. Extract files and upload jquery.malihu.PageScroll2id.js to your web server.
Include jquery, jquery UI and jquery.malihu.PageScroll2id.js in your html document
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script> <script src="jquery.malihu.PageScroll2id.js"></script>
The code above can be inserted inside the head tag or at the very bottom of your document, before the closing body tag (which is normally recommended for better performance). We’re using Google’s CDN to get jquery and jquery UI libraries (why?).
What these files do
jquery is the javascript library used by the Page scroll to id plugin (I’m making the crazy assumption here that you do know what jquery is. In case you don’t, here it is).
jquery UI (jQuery User Interface) extends jquery library and provides animation easing (you can make your own custom jquery UI bundle if you wanna cut down the size, see http://jqueryui.com/download).
jquery.malihu.PageScroll2id.js is our plugin file
Call mPageScroll2id function on window load (after the inclusion of the plugin files), either in the head or body tag
<script>
(function($){
$(window).load(function(){
$("a[rel='m_PageScroll2id']").mPageScroll2id();
});
})(jQuery);
</script>
Note that we’re wrapping our jquery code with (function($){ ... })(jQuery);. This ensures no conflict between jquery and other libraries using $ shortcut. See Using jQuery with Other Libraries for more info. We also use window load ($(window).load()) so the code executes after all page elements are fully loaded.
The a[rel='m_PageScroll2id'] selector used here means that the plugin will apply to any anchor element with m_PageScroll2id rel attribute value (e.g. <a href="#targetID" rel="m_PageScroll2id">link</a>).
When we click <a href="#targetID" rel="m_PageScroll2id">link</a>, the page will scroll to the element with id="targetID" within the document. So all that’s left to do, is create your unique id sections (e.g. <div id="myID">Section</div>) and the links that point to these sections within your page (e.g. <a href="#myID" rel="m_PageScroll2id">Go to section</a>).
You can change the function call selector to anything you want (an id, class name etc.). For instance, if you want the script to apply to all links with class name “myClass”, you simply do:
$("a.myClass").mPageScroll2id();
You can also have multiple selectors by inserting comma separated values. For example the following applies to a)every anchor element that’s inside a container with an id of navigationMenu, b)every link with href attribute value #top and c)every link with rel attribute value m_PageScroll2id
$("#navigationMenu a,a[href='#top'],a[rel='m_PageScroll2id']").mPageScroll2id();
That’s all you need to use the plugin. The code below is a most basic html example of a single-page using it:
<!DOCTYPE HTML>
<html>
<head>
<style>
#section_1,#section_2,#section_3{
height:1000px;
}
</style>
</head>
<body id="top">
<ul class="navigation-menu">
<li>
<a href="#section_1" rel="m_PageScroll2id">section 1</a>
</li>
<li>
<a href="#section_2" rel="m_PageScroll2id">section 2</a>
</li>
<li>
<a href="#section_3" rel="m_PageScroll2id">section 3</a>
</li>
</ul>
<div id="section_1">
Section 1 content
</div>
<div id="section_2">
Section 2 content
</div>
<div id="section_3">
Section 3 content
</div>
<a href="#top" rel="m_PageScroll2id">Back to top</a>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
<script src="jquery.malihu.PageScroll2id.js"></script>
<script>
(function($){
$(window).load(function(){
$("a[rel='m_PageScroll2id']").mPageScroll2id();
});
})(jQuery);
</script>
</body>
</html>
Configuration
mPageScroll2id function can get the following option parameters in order to customize its behavior and basic functionality:
scrollSpeed: Integer |
Scroll animation speed, value in milliseconds |
autoScrollSpeed: Boolean |
Auto-adjust animation speed according to element position, values: true, false |
scrollEasing: String |
Scroll animation easing type when page is idle, see jquery UI easing for all available easing types |
scrollingEasing: String |
Scroll animation easing type when page is animated, see jquery UI easing for all available easing types |
callback: function(){} |
User custom callback function to run after a scrolling animation is completed. Example: callback:function(){
alert("callback");
} |
pageEndSmoothScroll: Boolean |
End of page smooth scrolling (if bottom elements are too short), values: true, false |
layout: String |
Page layout defines scrolling direction, values: vertical, horizontal, auto Setting layout: "auto"scrolls page both horizontally an vertically. See the demo |
An example of defining these options parameters and their default values is as follows
$("a[rel='m_PageScroll2id']").mPageScroll2id({
scrollSpeed:1300,
autoScrollSpeed:true,
scrollEasing:"easeInOutExpo",
scrollingEasing:"easeInOutCirc",
callback:function(){},
pageEndSmoothScroll:true,
layout:"vertical"
});
Deep linking
There are many solutions for deep linking. The code below is an example of Page scroll to id plugin combined with Asual’s jquery address plugin:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
<script src="jquery.malihu.PageScroll2id.js"></script>
<!-- include jquery address plugin -->
<script src="jquery.address-1.6.min.js"></script>
<script>
(function($){
$(window).load(function(){
/* call both mPageScroll2id and address functions on our selector */
$("a[rel='m_PageScroll2id']").mPageScroll2id();
$("a[rel='m_PageScroll2id']").address();
/* call "externalChange" method of jquery address plugin to scroll page on browser back/forward */
$.address.externalChange(function(event){
if(event.value){
var eVal=event.value.replace("/","");
if(eVal===""){
eVal="top";
}
/* call "history" method of mPageScroll2id and pass jquery address hash value */
$().mPageScroll2id("history",{
scrollTo:eVal
});
}
});
});
})(jQuery);
</script>
By calling the “externalChange” method of jquery address plugin and passing its returned value via Page scroll to id “history” method, the page will scroll to the corresponding id each time we hit browser’s back/forward buttons or change the url in the address bar. Deep linking demo
Page scroll to id WordPress plugin
WordPress plugin is available on WordPress plugins directory.
Installation
- Open ‘wp-content/plugins’ folder
- Put folder ‘page-scroll-to-id’
- Activate ‘Page Scroll to id’ Plugin
- Go to ‘WP-Admin -> settings -> ‘Page Scroll to id’ to configure plugin options
Usage
Out-of-the-box, the plugin is applied to every link with m_PageScroll2id rel attribute value.
To start using the plugin in your theme, simply add rel="m_PageScroll2id" to any anchor element (<a />) in your markup and give it an href value of the id you wanna scroll to within the page (e.g. href="#targetID"), assuming of course that an element with such id does exist in your document.
Changelog
- Feb 9, 2013
- Added support for jQuery 1.9+.
- Sep 3, 2012
- Removed the hard-coded plugin directory URL from WordPress plugin file, in order to fix errors of .js files pointing to a wrong location.
- Jun 4, 2012
- Added Page scroll to id WordPress plugin
- May 31, 2012
- Developed jquery plugin out of the original Animate page to id script
Created single-page CSS template
- Developed jquery plugin out of the original Animate page to id script
License
You are free to use, study, improve and modify this script wherever and however you like.
All works are licensed under GNU General Public License, GNU Lesser General Public License or Creative Commons Attribution 3.0 Unported License.
Donating helps greatly in developing and updating free software and running this blog :)
Hi Malihu.
Great job!
I’ve posted a message in wordpress support forum. I’d really appreciate it if you could help me set up the plugin.
Thanks in advance =)
Hello this is a greta plugin thanks.
Just have a couple issues that are probably a simple fix:
I have installed this on a wordpress site and placed a link on the home page using this plugin to navigate to another page position, for some reason it doesn’t like the rel=”m_PageScroll2id” piece?
Also the plugin works when the link is on the same page, however it only scrolls showing the element in the centre of the window rather than scrolling to the top?
Kind regards
Mark
i was wondering if it is possible to zoom the content in and out / fly in or out from center instead of horizontal or vertical scrolling..
Can some one explain with an example on how and where to put this:
“To start using the plugin in your theme, simply add rel=”m_PageScroll2id” to any anchor element in your markup and give it an href value of the id you wanna scroll to within the page (e.g. href=”#targetID”), assuming of course that an element with such id does exist in your document.”?
Thank you.
Somewhere in your html (e.g. in your navigation menu, a plain link etc.):
<a href="#target" rel="m_PageScroll2id">Scroll to #target</a>Further down in your html:
<div id="target"> #target content... </div>Clicking on the link above will animate the page to the #target div.
On the top of this page there are many examples and online demos so you can study their source.
In WordPress plugin’s settings you can change the default selector or add your own.
You did all this fabulous work, yet the directions are horrible. Most people want to use this with wordpress menus items that navigate vertically to a place on the page.
Your examples don’t work. Why can’t you make your directions bullet proof so non developers can understand them?
Very frustrating and it makes more work for you in the end.
Hello,
I’m really struggling to find time to write few more guides regarding the WordPress plugin. I’ll try to update wp documentation as soon as possible.
Thanks for the feedback
Hi There,
First of all i want to thank you for this nice plugin.
I have one single problem and i can’t find a way to fix it. Basically i want to make the menu responsive and i’m using JS. The effect dissapear on the drop down menu when is for mobile.
I’m using this code for making my menu when the web is browsed by some small devices.
// DOM ready
$(function() {
// Create the dropdown base
$(“”).appendTo(“nav”);
// Create default option “Go to…”
$(“”, {
“selected”: “selected”,
“value” : “”,
“text” : “Go to…”
}).appendTo(“nav select”);
// Populate dropdown with menu items
$(“nav a”).each(function() {
var el = $(this);
$(“”, {
“value” : el.attr(“href”),
“text” : el.text(),
“rel” : “rel” // That’s the place where i’ve add the rel from the plugin.
}).appendTo(“nav select”);
});
$(“nav select”).change(function() {
window.location = $(this).find(“option:selected”).val();
});
});
In the source code i could see the “rel” with the correct id, but because now i use “value” insteat of “a” i think the plugin is not active anymore. I’ve tried in few ways but still not able to enable the nice effect. Is just scroll directly to where i click .
Thanks a lot!
Hi malihu,
I am not a developer and I am struggling more than I normally do with this one. Obviously there’s something I am missing here.
Am I able to use this with a native WordPress menu link to scroll to a location further down the page, or another page entirely, and if so “exactly” how please…?
Can you give me an idiots guide and walk-through because that’s how I feel right now. Been struggling for hours!
Terence.
I feel your pain Terence… I too wasted a lot of hours trying to figure out what this guy, on this website below clarified in 1 minute with an excellent video tutorial.
http://www.pootlepress.co.uk/2013/02/video-tutorial-a-beginners-guide-on-how-to-create-a-single-page-wordpress-website/#comment-4303
Not sure how the developer of this plugin could just gloss over whtat’s in that video.
Thanks a lot. Your cool stuff helps me a lot!!!
the first demo is with the fix background, or if not what i can change to make the strolling site with fix background?
Hello, I’m writing because I do not know how to make headlines with the h2 tag references are plugin. Should I add another menu in the template in the sidebar?
Thanks
Is in worpress theme.
Hi
great plugin. I have one problem, I have a kind of a conflict with the folowing scripts.
When I add you pluging, the jkit stop functioning.
Thanks
$(document).ready(function(){
$(‘body’).jKit();
});
Hi. Great script. It was working well with jquery 1.8.2 and jquery-ui 1.9.0. I just updated to the latest version (jquery 1.9.0 and jquery-ui 1.10.0), and also got your latest js from Github.
There’s an error in line 24, and it’s because .live() is deprecated. I changed that line to
return this["on"]….. and it works now.
Hey, thanks a lot for the feedback
I’ll update the script soon to a new version. Simply changing “live” with “on” does work but only for elements that already exist in the page. To include existing and future (dynamic) elements, you can re-edit line 24:
return $("body")["on"]("click",this.selector,function(e){the above will work with jQuery 1.7 and later. In order to support older jQuery versions I’ll most likely use .delegate() (instead of .on()), which does exactly the same thing (and included since version 1.4.something):
return $("body")["delegate"](this.selector,"click",function(e){I have a fixed header that I want all links to be 205px from top.I can’t use padding for the div to link to because I have drop down menus with multiple links per page that look funny 205pc apart.
I wonder if there is somewhere in the js/jquery.malihu.PageScroll2id.js file to insert an offset of 205pc from the top of page?
I haven’t figured this one out yet.
Best,
Matt
Hi!
Thanks for your work, it’s great!
I’m trying to use your plugin in my Wp, it works perfeclty and it’s easy to use.
Anyway I have an issue and I’m not sure if it can be solved:
I have a home and a top menu. Clicking in one of the in top menu, it scrolls down to an id.
Until here everything is ok.
But if you click in one of the elements inside this id, a new page is loaded. In this new page top menu is still there, of course, but that id was in home, not in this new page. So it doesn’t work any more.
Is there anyway to link this scroll to an url + an id? I mean somethig like
name
(I’m sorry if my explanations are bad, my english is not so good
)
Just if you have a moment I leave here a link, my be it’s easier than my explanations if you see:
http://www.elbotonrojo.es/elpuntodelai/
“cosasssss” in top menu scrolls to “cosas” in home.php. Then when you click in the picture a new page is loaded.
Thanks a lot for reading this and congratulations for your work!
Hello and thanks for your comments,
Did you managed to fixed that? When the new image has loaded, when I click again on “cosasssss” it does scroll to “cosas”.
Hi!
Yeah, sorry, I didn’t explain well
When you clik on the picture a new div is loaded in the same page. So scroll works. If you click on “read more” in this new div, a new page is loaded. Then is when “cosassss” doesn’t work.
Question is if you can ask the “a href” to load a new page and then, when loaded, to scroll to an id.
I’ve been reading what you wrote about deep linking. May be solution is here? I’m not sure if I understood well what it is. Anyway I’ve tried to use “address” in my site and it doesn’t work (I don’t know javascript or jquery so well to create specific functions which work in my Wp).
Thanks and saludos desde España
I meant “more info” button, nor “read more”
Great Plugin!
Has anyone put together a code that uses the html versions current state (as you scroll past) function and applied it to the wordpress plugin?
If anyone cares to share, i’d really love to have this function on my wordpress site!
Setting padding on the elements being scrolled to is resulting in inconsistent placement of the nav menu even with position: fixed. It scrolls to different place from above than from below, and the same padding on different elements produces different results. This is using the wordpress plugin. I can’t provide link because in maintenance mode. Do you offer support via pm?
Send me an e-mail
Your plugins are very sleek! Very cool demos. Its inspiring!
This was working fine, but when I added a jQuery Tooltip to the page, which works great…I now get an error of :
TypeError: $(“a[rel='m_PageScroll2id']“).mPageScroll2id is not a function
[Break On This Error]
$(“a[rel='m_PageScroll2id']“).mPageScroll2id().address();
Do you know what this might be and why?
Here is my code:
$(document).ready(function(){
$(window).load(function(){
/*$(“#light_blue_phone”).tooltip({tipClass: ‘tooltip1′, effect: ‘slide’});
$(“#tan_phone”).tooltip({tipClass: ‘tooltip2′, effect: ‘slide’});
$(“#dark_blue_phone”).tooltip({tipClass: ‘tooltip3′, effect: ‘slide’});*/
/* call both mPageScroll2id and address functions on our selector */
$(“a[rel='m_PageScroll2id']“).mPageScroll2id().address();
/* call “externalChange” method of jquery address plugin to scroll page on browser back/forward */
$.address.externalChange(function(event){
if(event.value){
var eVal=event.value.replace(“/”,”");
if(eVal===”"){
eVal=”top”;
}
/* call “history” method of mPageScroll2id and pass jquery address hash value */
$().mPageScroll2id(“history”,{
scrollTo:eVal
});
}
});
});
});
$(document).ready(function() {
$(“#light_blue_phone”).tooltip({tipClass: ‘tooltip1′, effect: ‘slide’});
$(“#tan_phone”).tooltip({tipClass: ‘tooltip2′, effect: ‘slide’});
$(“#dark_blue_phone”).tooltip({tipClass: ‘tooltip3′, effect: ‘slide’});
});
Very cool, plugin! I could not get this to work with easing effect in WordPress until I found this plugin.
Quick questions – It scrolls just a little past where I want it to how and where can I add a negative offset and what would be the code to do so?
Also, How and where would I add code so that my nav menu is highlighted on the section where the screen is at..
Thanks Much.. Scott
Hello and thanks for your comments.
If it seems to scroll past where you visually want it, you can add a top padding to the target element or insert another tag (e.g.
<a id="your-id"></a>) above the element you’re scrolling to and act as your anchor point.The plugin scrolls the page to the exact position of the target element (its position includes its padding, but not its margin). If you check the demo, I’ve also added a padding to the sections I’m scrolling to in order to give them the offset of the top menu.
To highlight a navigation menu item while scrolling (via the plugin or manually), check the code in custom.js of the CSS template.
Thank Malihu, I think it was just the wp admin bar that was hiding my page title that was making me think it was scrolling past
Great Plugin
Thanks Scott
This was my next go but could not get it working.. may have been a conflict or something but really cool men… If anyone gets this working on wordpress please share a short screen cast on screenr.com or something
http://tympanus.net/codrops/2010/04/30/rocking-and-rolling-rounded-menu-with-jquery/
Hello! I started using your plug in today on one of my pages. When I implemented the plug-in and started using it, the scrolling worked great, but it made my sidebar disappear! I have a sidebar on the site that includes navigation. Any ideas on how to make it come back? It disappeared for the page I am using your plug-in on only.
I really need some help..
What i am trying is to have a vertical scrolling (top bottom) with 10 sections and 7 of them i want to use the horizontal scrolling in diffrent sections/categories but somehow combining the 2 and changing some values it doesnt work..
Is it possible to hide the various target divs, an only make them visible once they have been activated via the function (then hide everything else)?
Thanks!
Will this plugin work with any WordPress template, or does it have to be a “one page” type of template? Do you have a starter template that you recommend that will work well with this plugin?
Thanks!
It works with any template. The most obvious implementation would be on a single-page template of course, but you can also use it on any type of template for back-to-top links, jump to comments section, etc.
HI !!! this is a nice plugin. Unfortunately we have a problem with touch scrolling on the iPad. Maybe you have a solution for the following problem:
On iPad the first touch on the navigation works like charm, but touching the next link won´t work. Now if I scroll down or up for a pixel or more the scrolling effect works again.
Doe you have an idea?
Thanks in advance,
Hello,
Unfortunately iPad’s implementation of position:fixed CSS rule is a bit buggy. Seems that it requires a touch-swipe to re-position a “fixed” element within the viewport and since we scroll the page via javascript (without swipe), the bug happens.
I don’t know when they’ll implement a fix for this, so currently the only thing you can do is either remove the fixed navigation and have a non-fixed menu at the top, or scroll the menu via javascript like the one I’ve made on the CSS template:
http://manos.malihu.gr/tuts/animate-page-to-id/css-template/
Hello!
Thank you very much indeed malihu for a very helpful plugin! Having the exact same issues on my ipad and iphone I’m thankful for getting an explanation to it as it was driving me mad. After a quick google search I found this solution which I presume might work.
http://14islands.tumblr.com/post/30313367126/solved-position-fixed-scrollto-bug-ios
I’m however completely lost when it comes to javascript so I have no idea how incorporate it.
Thanks! I’ll check it and see if I can implement it in the plugin.
Oh, that would be fantastic! Apple are supposedly fixing this for IOS 6 though one can never be too certain. Thank you again for your help!
Hey great work. Everything works fine but I am building a fluid site with a fixed header and when I click an anchor it scrolls but lands at the top position of my fixed header. How do make it land right where the header element ends?
Hello,
This is normal. Just give the target element (the element you’re scrolling to) a top padding equivalent to your fixed header height.
Hi there. This script is really great, and works perfectly on my desktop browsers, but I’m having some troubles porting it over to work in Safari on the iPhone. I’ve been toying with the code, and have been able to make the transitions work on my mobile, and in the development simulator for iPhone/iPad. I feel as if there is something very simple that I am missing. Any suggestions would be welcome. My function code to call is as follows:
(function($){
$(window).load(function(){
$(“a[rel='m_PageScroll2id']“).mPageScroll2id(
{
scrollSpeed:1700,
autoScrollSpeed:true,
scrollEasing:”easeInOutExpo”,
scrollingEasing:”easeInOutCirc”,
callback:function(){},
pageEndSmoothScroll:true,
layout:”auto”
});
});
})(jQuery);
The symptoms seem the same as @Botond, but only in the mobile browser is it jumping without a smooth animation.
Thanks very much,
Derek
Hello,
The script automatically removes animations when layout is “auto” (page scrolls both horizontally and vertically) and touch device is detected.
I’ve made some tests on iOS 5.1 (on an ipad) and seems that touch devices do not handle animating root elements on both axis. This is a touch device OS related issue so there’s no fix or workaround. This applies only to “auto” layouts when viewed from such devices.
Removing the animations is essential in order for the plugin to work well and be accessible from anywhere (desktop or mobile).
Ahh. I see. Thank you for the quick response. This explains accurately why some of your examples work in the emulator, and some don’t. I had been trying to ascertain some coding difference there, but had no idea that it was a limitation of the software in that particular hardware set.
Derek
WordPress plugin not working, when I user an HTML5 Reset theme.
Theme source: http://html5reset.org/#wordpress (Unfortunately) I can’t give you a direct link, the site is not public yet.
I downloaded the plugin and followed the instruction regarding the implementation. When I click on the anchor it jumps to the right place, but without smooth scrolling. I think that the jquery is not loaded…
Do you have any ideas how could I solve this problem?
Thanks,
Boti
From what you say either jquery, jquery ui or jquery.malihu.PageScroll2id.js is not loaded. Check if paths are correct for those files and try opening your page with Firefox and inspect it with Firebug to see if any errors appear on the console.
hi malihu and how do we make smooth work , then? should i install jquery to wordpress? how to do it? not very expert on it sorry to be asking... hugsHello, this is a great tool, i’m wondering how can i freeze the header, something like this: http://www.pedrote.com
Thanks !!!
Give it
position:fixed;in the css.Thanks !!! But after possition:fixed, the sections names shows in the same place as the logo
Hey, how could I configure this so rather than scrolling so the specified element is at the top of the page, it scrolls until it’s in the center. Thanks for the great work!
Question: Will this work on a div within a page? In other words, the entire page will not move, just a specific div on the page will scroll?
Nope. The plugin scrolls only the root element (html or body).
Hi man,
thank you for your greit plugin.
I’ve already tried other scripts, but I think your is the best for my design.
I’ve a problem.
my page simulates a chess board.
how can I make the menu follows the horizontal scrolling?
If you try my demo, you’ll notice that the memu is working only in the first row.
and, another “little” question.
How can I make your script work with li element instead of link?
i want to integrate fancybox with the links.
Thank you man,
sorry for my english,
Stefano
take a look here
Hello!
The css-template menu is made for vertical navigation only.
If you wanna make the menu follow both x and y axis, edit custom.js and replace NavigationMenu function the with the following one:
$.fn.NavigationMenu=function(speed,easing){ var $this=$(this); var topPosition=$this.position().top; var updatePosition; var leftPosition=$this.position().left; var updatePositionX; $(window).scroll(function(){ updatePosition=$(this).scrollTop()+topPosition; updatePositionX=$(this).scrollLeft()+leftPosition; $this.stop(true,false).animate({top:updatePosition,left:updatePositionX},speed,easing); $().NavigationMenuHighlight(); }); }You also need to give a fixed width to
#navigation-menuin css.On the second question, the plugin works by getting the href hash (#) value of elements, so I can’t really suggest giving href attribute to list elements.
Hope this helps
Thank you for your comments
Hey man is the single-css file directly downloadable I’m having problems getting an image to expand to full browser width
The download archive contains all css template files inside css-template folder.
teset
sadasdasd
yooooo!
fff!!!
ttteeesttt
testing55
Just started delving into this library, thanks for the help.. whats cross browser compatitibility like? I know webkit doesnt support.. thanks in advance! will link you when ive finished building
Hello,
The updated jquery and wordpress plugins, as well as the css template work on every desktop browser and touch device (I’ve tested scripts successfully on iOS 5.1 on iPad).
Hi,
Im struggling to get this to work for my situation…
I’ve got a jqueryui dialog, on which is a scrollable div. Im trying to get the div to scroll to a certain section using your plugin
I am impressed about the reduced code to your above horizontal scrolling example with fullscreen images and next/prev. navigation.
Do you also have the same with an example of vertical scrolling?
I would appreciate it to see it in action.
Gracias!!
The equivalent of this script for vertical scrolling:
http://manos.malihu.gr/animate-page-to-id-with-jquery
I am new to all this just started learning css/js/jquery yesterday. but I was trying the same thing without “easeInOutExpo” and it still works fine, I dint actually try working it with the easeInOutExpo thing cause I think for some reason it is not able to find the function, anyways this is what exactly what I used:
$(function() {
$(‘ul.link a’).bind(‘click’,function(event){
var $anchor = $(this);
$(‘html, body’).stop().animate({
scrollTop: $($anchor.attr(‘href’)).offset().top
}, 3000);
event.preventDefault();
});
});
It is exactly what you did but this way I don’t have to go every time and call the method everywhere a link is defined, it automatically activates when a link is clicked. I am not sure what adv/disadv this has so please let me know if any and if you can, can you brief me on what difference would it make if I used easeInOutExpo.
I have included the file but I dont know why it cant read the method, any suggestion there too would be great help.
Muito bom, parabéns pelo tutorial!!!!
Obrigado!
Google Translate helps
Pretty solid system, thanks!
Is it also possible to use prev & next button?
For instance if you are at C3, you could go back to C2 or next to C4…
I haven’t implement an automatic way of scrolling to next/previous id yet. I might give it a go in the future. For now, you can always do it manually
I’ve done some testing with horizontal scrolling with next/previous scrolling. It has some extra stuff like fullscreen background images etc., but to get an idea:
http://manos.malihu.gr/tuts/horizontal_single-page_template/page_srolling.html
Nice work!