flesler / jquery.scrollto Goto Github PK
View Code? Open in Web Editor NEWLightweight, cross-browser and highly customizable animated scrolling with jQuery
Home Page: http://demos.flesler.com/jquery/scrollTo/
License: MIT License
Lightweight, cross-browser and highly customizable animated scrolling with jQuery
Home Page: http://demos.flesler.com/jquery/scrollTo/
License: MIT License
if($.browser.webkit) bodyelem = $("body")
else bodyelem = $("html,body")
$('.autoscroll').click(function() {
$(bodyelem).scrollTo(bodyelem.height(), 10000);
});
I am using this code to scroll to the bottom of the page. I have to wait the scroll time again after the scrolling has finished before being able to scroll again. So a total of 20s in this case.
This is on the latest FF version (16.0.2)
The code below suddenly stopped working in google chrome (it works on firefox and opera) The javascript console has no errors, and if i return true on click, browser jumps to id location, but only after the 750ms delay. Some advice or misusing of your plugin? thanks in advance.
<script>
// automatic scroll between anchors in the same page
$('a[href^="#"]').click(function(event){
var anchor = $(this);
var hash = anchor.attr('href');
if(hash.length > 1){
$.scrollTo(
hash,
750,
{
easing:'easeInOutCubic',
onAfter: function(){
window.location.hash = hash;
}
}
);
return false;
}
});
</script>
<body>
<a href = '#about'>about</a>
<a href = '#articles'>articles</a>
<section id='about' style='border: 1px solid red; height:2000px'>
about section
</section>
<section id='articles' style='border: 1px solid blue;'>
articles
</section>
</body>
… so that a bower install jquery.scrollTo
will install the current 1.4.6 (and not 1.4.5).
Thanks in advance!
body.scrollTop is deprecated in strict mode.
Please use 'documentElement.scrollTop' if in strict mode and 'body.scrollTop' only if in quirks mode.
jquery.scrollTo-amd.min.js:1
Please distinguish between old and new webkits.
(and you may use "use strict";
)
Hello,
I use the following function to trigger a +1 and -1 scroll using jQuery in order to make images show up when using lazyload in combination with isotope or else the images wouldn't show up when filtering. The website is my portfolio at http://www.gablabelle.com/, click click open the menu and click on Nightlife.
function forceLoad(){
$.scrollTo("+=1px");
$.scrollTo("-=1px");
};
It works great in FF and Chrome browsers but not in Safari (testing with version 6).
Using a setTimout works but we can see it scrolling. It has to be transparent for the user.
function forceLoad(){
$.scrollTo("+=1px");
setTimeout(function(){
$.scrollTo("-=1px");
}, 500);
};
Any ideas on what I could try to solve this? Or a workaround that also works in Safari?
Hey I implement ScrollTo in my page but it flicker always as I also fixed the position of that div in which I align all item so when I click on any link the pages goes up and then comes down but it works fine in Chrome.If I add return false
then It work same for all browser as it goes up and then comes down.As it has same behavior with when I add return false but it the scoll behavior become fast and also make jerky.
Hey, had this + localScroll rolling for a while on a website; Chrome 25 seems to have broken it.
All other browsers seem to be working fine, can anyone else confirm this?
Would be great to make use of margin and other hacks in order to make use of css3 hardware accelerated
transforms instead of jQuery animate
Is the latest version of scrollTo compatible with jQuery 1.10.2?
I tried scrollTo with jQuery 1.10.2 and could not get it to work. It worked with jQuery 1.8.0. Perhaps I'm initializing the plugin incorrectly?
$.scrollTo('#i-dont-exist', {duration: 300});
TypeError: Cannot read property 'slice' of undefined
Sorry, I don't have a test case, but I just thought you'd like to know.
Using Chrome 29.x, haven't testing in other browsers.
On your demo page (http://flesler.com/jquery/scrollTo/), the first scroll section
The discrepancy 17px, the width of the scrollbar.
I use this plugin with accessibility skip links.
One link targets the id of the search input.
But the focus is not given to this élément.
It's the same when the target is a menu.
Something like $("#target_id").focus(); might help, but, I don't know where to put this in the code.
More hints here : http://stackoverflow.com/questions/5639714/jquery-scroll-to-div-and-focus-a-textbox
The version number in the component.json files states v 1.4.3.1 making the installation through bower to fail.
bower error invalid version: 1.4.3.1
I presume is not working either with yeoman but I haven't checked it out.
When scrolling to an element and using offset it appears the calculation is made based on the first view of the dom. Any changes to the dom and the offset behaves incorrectly.
Exemple here : http://jsfiddle.net/VxSfp/
Please consider making these 3 scroll plugins AMD friendly.
This is an easy way: https://github.com/umdjs/umd
Thank you!
ok, so I'm a bit new to jquery and found your plugin totally awesome! but I cannot get it to work, I've been through all the topics posted in issues and the documentation and tried literally all the suggestions made to other but still cannot get it to work. Help please?
The mark up:
Welcome to My company this is the company where you will be in a company
We focus on being the top company of compies especially when companies are likea real company.
More so we also provide companies with things that companies need, like people to be in the company.
the js
jQuery(document).ready(function($) {
$('#nav').localScroll({
target:'#content_wrap', // Could be a selector or a jQuery object too.
axis:'x',
queue:true,
duration:1500
});
});
Hi there, thanks for this great tool !
Just quick question:
Compressed version is v1.4.6 and uncompressed is v1.4.7?
https://github.com/flesler/jquery.scrollTo/blob/master/jquery.scrollTo.min.js
Thanks!
edit: edited subject
I have an element at the top left corner of the screen called .pageHome and one way off to the right and down called '.RIGHT'. When i click the link to take me to .RIGHT everything works fine but when I click the Home Link the page jumps to the top (y axis) then scrolls to the left (x axis) even though i am using axis method telling it to scroll x first then y.
Source Here: http://pastebin.com/2bqFZV4R
Any plans for this?
As reported by htrex on #27
Just out of curiosity, why aren't you providing minified versions of these plugins on Github?
Having an issue in safari 6 on os x mountain lion. For example, when trying to issue a scrollTo() command in a 2000/2000px html body, only the vertical component is scrolled. Is anyone else experiencing this? It works find in safari 5, ie9, firefox and chrome.
$.scrollTo({left:1000, top:1000}, 1000);
Uncaught TypeError: Object function (e,t){return new v.fn.init(e,t,n)} has no method 'scrollTo' asset.php:598
(anonymous function) index.php:598
v.event.dispatch jquery.min.js:2
o.handle.u
jQuery v1.8.3
$("nav ul li a").click( function(e) {
var id = $(this).attr("href");
var t = "div";
var total = t+id;
console.log(
});
Getting this error is the call right??
How to pause and cancel .scrollTo()
on user mousewheel DOMMouseScroll
during the .scrollTo()
animation like for $('html, body').scrollTo(10000, 10000);
?
Probably it would be counted also like a preferred UX feature under the plugin core defaults.
$(window).on("mousewheel DOMMouseScroll", function(e){
$.scrollTo.window().stop(true);
});
it would not work with jQuery event scroll
, it handles also mouse click or drag on the scroll bar.
Hello
I tried your srcrollTo plugin for a navigation. "localScroll" was not working at all, so I got it managed to use srollTo for scrolling to an element.
But for now the scrolling always happens from top, is it possible that the scroll scrolls up if the offset is above the current location on the window?
Thanks
Dominic
I've tweaked a local copy to allow for offset (and also over) to also accept a function as a value, besides a numeric value or object.
In my case I have a static fixed-top nav bar that may get taller on smaller screens.
I have added one line to the "both" function. Works great. Would be nice to see this in a future release.
function both( val ){
// test value to see if it is a function
val = typeof val == 'function' ? val() : val;
// then run the original test below:
return typeof val == 'object' ? val : { top:val, left:val };
};
. . .
Here is an example where I am using a dynamic top offset to handle a variable height fixed -position nav bar:
// calculate the offset required based on the navigation bar's current height
var offset = function() {
return { top: 1 - $('#navtop').height() };
};
// adding scrollTo for navigation anchors
$('#navtop,#navbottom').localScroll({
hash: false,
offset: offset,
easing:'swing',
duration: 600
});
I have a horizontal list of items in which I need to center the current item. The container that holds the list of items can be easily resized by the user. Therefore, I need the offset setting to be dynamic instead of static.
For this reason, I made the following changes in jquery.scrollTo.js:
At line https://github.com/flesler/jquery.scrollTo/blob/master/jquery.scrollTo.js#L193, I added a function to return the offset value
function offset() { return both($.isFunction(settings.offset) ? settings.offset() : settings.offset); }
I removed line https://github.com/flesler/jquery.scrollTo/blob/master/jquery.scrollTo.js#L111
I changed line https://github.com/flesler/jquery.scrollTo/blob/master/jquery.scrollTo.js#L157 to
attr[key] += offset()[pos] || 0;
Best regards
It appears the latest version in the component.json (1.4.5b) hasn't been created as a tag, and therefore Bower doesn't recognize it. The current version 1.4.4 has a bug that was fixed that was including the minified version of the file which throws off the grunt-bower task. I fixed this locally with:
git tag -a 1.4.5b -m 'Bower tag version v1.4.5b'
But realized you can't create a pull request for a tag. In the meantime I've configured my project's component.json to point at my fork via:
"jquery.scrollTo": "git://github.com/cbumgard/jquery.scrollTo.git#1.4.5b",
Thanks,
-Chris
the minified version is still 1.4.6 instead 1.4.7
Uncaught SyntaxError: Invalid regular expression: /^([+-]=?)?\d+(.\d+)?(px|%)?$/: Stack overflow
At its heart, jquery.scrollTo uses this format of the .animate()
method:
.animate(properties [, duration ] [, easing ] [, complete ])
Would it be possible to use the alternate version of the .animate()
method:
.animate(properties, options)
to allow optional passing in of additional properties that could be animated while the scroll is happening? For example, animating (with the proper plug-ins) the background color of an element while it scrolls.
It appears on cursory examination that this would involve moving the current duration
, settings.easing
, and callback
arguments to a new options
object as well as getting the current attr
argument into a new properties
object along with any other properties that are passed into the plug-in.
There are two possible solutions - either 1) ignore user scrolling until the animation is complete, or 2) cancel the animation so the user regains control. I'm not sure how easy 1) would be to implement, but 2) is very simple, as the following function demonstrates:
function polite_scroll_to(val, duration, callback) {
/* scrolls body to a value, without fighting the user if they
try to scroll in the middle of the animation. */
var auto_scroll = false;
function stop_scroll() {
if (!auto_scroll) {
$("html, body").stop(true, false);
}
};
$(window).on('scroll', stop_scroll);
$("html, body").animate({
scrollTop: val
}, {
duration: duration,
step: function() {
auto_scroll = true;
$(window).one('scroll', function() {
auto_scroll = false;
});
},
complete: function() {
callback && callback();
},
always: function() {
$(window).off('scroll', stop_scroll);
}
});
};
If a dom element, is changed above the current element, the current element's old position is used, and a new is not calculated in it's place, causing scrolling to be ineffective.
In the demo, if i want the "wrap" be with the same height of browser window to have a "responsive" page, i need to set the wrap height to 100%.
I'm speaking about using your script in a "vertical sliding" situation.
When i do this, the script don't work and i cannot click to next/prev buttons.
My need is to have a "post" with a max dimensions of 800x600 and that reduce size when i go to reduce the windows (wrap) size.
Can you help me?
Is there a reason localScroll
has an onBefore
, this one has onAfter
, but not onBefore
?
Hello, your demo index.html is referring to "../jquery.scrollTo-min.js" rather than "../jquery.scrollTo.min.js".
As I used the jQuery Migrate plug-in to identify code issues in migrating to jQuery 1.9, it showed scrollTo1.4.2 each time I use it (in large Accordion sections to get them to 'top up'). Also, I commented out the script tag linking scrollTo to the page, and ran the page on just jQuery1.9.1 (no Migrate plug-in) and the page loaded, ran fine, and had no errors in the Console.log, other than scrollTo is not a function (anymore). Seems clear that scrollTo1.4.2 uses some deprecated code that is now gone. I don't see any release notes describing a scrollTo version that supports jQuery1.9.x. Seems like a new scrollTo release to support jQuery1.9 is necessary.
I can provide console.log info from the Migrate plug-in, if you need it. Contact me at mlaird (at) alum (dot) mit (dot) edu
I have pinpointed a bug after a few hours of going through my code base and it appears that an upgrade to jQuery 1.8 and jQuery UI 1.8.23 breaks scrollTo(). The last known working version is jQuery 1.7.2 (I haven't tested it on jQuery 1.7.3 yet).
I'm using the following scrollTo command:
$.scrollTo($("[name=page-2]"), {duration: 500, easing: 'swing'})
Plugin doesn't throw any errors, it overrides default click event, but doesn't scroll on Chrome with jQuery v1.8.2.
Hi guys,
I've a issue with the plugin...
This code doesn't work on Safari and Chrome:
$(window).scrollTo('#div', 1000, { queue: true });
It works fine in other browsers like Mozilla and IE.
Any ideia? Thanks
I am using scrollTo 1.4.3.1 in combination with localScroll 1.2.8b, jqueryMobile 1.8.0.
localScroll is initiated like this:
$.localScroll({
duration: 1000,
queue:false, //false is diagonal scroll, true is one axis at a time
axis: 'xy'
});
and thereby using links throughout the page in the following way:
home
link2
on desktop everything works fine, but on iPad it only scrolls 1 axis. When setting queue: true, this is very clear....it moves along the x axis, but when going to y it also goes back to the first column.
Any ideas?
Please check it here: http://jsfiddle.net/qstdT/9/
Make result panel big as you can and then check it.
Menu(light orange box) is under big red div in which I applied scroll.
Functionality is like, when I click on menu it scrolls and then jQuery's fadeOut & faceIn effects run.
Bug: After this both effects, window automatically scrolls at it's default position.
Hi there,
Your plugin is great, but I wonder if it would be possible, when scrolling a parent to a child element, to not scroll the parent if the child is still in view. When using the plugin to navigate down a scrolling dropdown menu via the keyboard you currently get the unnatural behaviour that the currently selected item stays at the top of the portion of the list in view - this works but it looks kind of odd when you compare it to standard scrolling behaviour on other elements.
Any thoughts?
Cheers, Andrew.
Of ST version 1.4.4. Using jQuery 1.8.*.
Exception raised consistently, every call.
Scrolling actually does occur.
Here's how I'm calling ST:
b=$("<a>").text("↓").on("click", function() {$.scrollTo($(this).parents("li").next())});
Help!
Thanks.
;o)
This line of code below works great for stopping a scrollTo animation on the body, but when using scrollTo to animate an element buried in the markup, it doesn't seem to stop or dequeue animations. Any ideas?
jQuery.scrollTo.window().queue([]).stop();
I am using jq1.10.2, jq-scrollto, jq-nicescroll and some custom jquery to create a single page, responsive wordpress theme.
I am almost done and ready to release the theme, here's a demo http://swgserv.com/web/j/akshaykumar/ it works on all major browsers down to ie7... it works on screens below 800px wide [yeah just 2 stops for now]..
Only problem, which a client pointed out is IE Mobile support - it displays fine but menu which is .scrollto powered isnt. I dont own a test device so I just relied on a video sent to me. Hope you guys can help me out, I tried validating the code as much as I can against HTML5, UTF-8 W3C standards still got some errors but those are from wp plugins and some inner content.
Thanks
New issue with flickering during scroll on Mobile Devices.
After doing some googling and research I see some have solved this problem by adding return false on the click or explicitly setting the axis in the options. Can you look into this? I can provide video if you need. I am using localscroll with hash: false
#33
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.