jQuery scrollTo or animate do not scroll page - javascript

I am trying to do something simple: when the user clicks on a div, the whole page scrolls to a certain location. I have done this before, but somehow this seems to not be working now. I mean, for now I just want any scrolling to happen to know that the plugin works.
It's quite simple really: $.scrollTo(500, 500) should be working, but nothing reacts, no error is thrown.
Here is a link to a dummy version of what I am doing: http://jansensan.net/dump/jquery-scrollto-issue/ Simply click on the black div at the bottom right to see... nothing happening. You may also look at the full code: http://jansensan.net/dump/jquery-scrollto-issue/js/global.js.
Is there anything in CSS that could break that functionality?

You can do like this:
$('html, body').animate({
scrollTop: $('#elementID').offset().top
}, 1000);
Replace #elementID with the id of the element you want to scroll to with animation.
Check out the actual implementation by click on Request Quote link at bottom.

It seems I was relying on wrong examples, $.scrollTo("#bottomContent", 1000, {easing:"easeInOutCubic"}); does work, sorry if for some of you this issue was obvious.

Your JavaScript says:
function scrollToTouts()
{
// FIXME: whatever I do here, nothing scrolls
$.scrollTo(500, 500);
}
Don't you need to supply the target of the scroll?
e.g.
$.scrollTo('#content', 500, 500);
or
$.scrollTo('body', 500, 500);

Related

scrollTo not scrolling to the start of the element

I tried to implement the scrollTo funcion but the problem is that when i scroll i want the element that i scrolled to at the topof the screen not in the middle or somewhere else.
JsFiddle
here is the js funcion
$(document).ready(function () {
$(".scroll").click(function (event) {
$('html,body').animate({
scrollTop: $("#footer").offset().top
}, 500);
});
});
Your problem here is that there is not enough space at the bottom of the screen to scoll so that the targets ends at the top. The scrollbar is fully at the bottom.
Add a lot of whitespace at the end of the page, this will give more room for scrolling. When you do this, your code works just fine.
It is because your page isn't tall enough. To make a javascript function that automatically makes the page high enough (no matter what is in it) do:
$("body").height("100%");
$("html").height(($("body").height()) + 500);
see: http://jsfiddle.net/ZNV7G/1/
If you want to be extra sure you can replace the + 500 with * 2, but that will be a bit excessive in smaller documents.

Scroll to link with skrollr

I am using https://github.com/Prinzhorn/skrollr to animate the background of my site as I scroll. However I am also wanting to have my links scroll up and down the page like a normal single page site would do.
The problem is that both are working if I manually scroll the background changes, if I click the link the page scrolls to the correct place. The problem is that when I click the button the background doesn't scroll as well.
It seems like I am working with two different scroll functions and as a result they aren't working together and I need to use the same one.
Here is the code.
js - Scroll to link:
var $root = $('html, body');
$('a').click(function() {
var href = $.attr(this, 'href');
$root.animate({
scrollTop: $(href).offset().top
}, 500, function () {
window.location.hash = href;
});
return false;
});
js – Skrollr init
skrollr.init({
smoothScrolling: true,
forceHeight: true
});
I will try put together a fiddle to make it more clear but hopefully the answer is really simple.
If anyone else ever faces this problem the answer lies her: https://github.com/Prinzhorn/skrollr-menu
This will allow you to scroll to you internal links along with Skrollr animations. A HUGE plus and a very simple fix, you don't even need any of your own scrolling code just this and it will work with you links.
There's a way to do this, Skrollr has some methods very useful, in console, just type the variable contains skrollr, it will show some methods that you can use, one of them is "setScrollTop(int, bool)", so just call this method with the info you need, for example:
s.setScrollTop(9000, true)
Which means that I want it to scroll to the height position 9000. It works fine, you just need to know the height position where you need to go.

Using .offset().top with .slideUp

I'm trying to make the window scroll to an element on click. It is working, except when the slideUp animation of one of the previous elements fires, the clicked element scrolls up way past the top.
Here's the link: http://jtwebfolio.com/mobi
NOTE: Size your browser down to mobile width to best see the issue. Also, this is taking place on the portfolio projects.
Here's the code:
$('article.project header').click(function(){
if($(this).parent().hasClass('clicked')){
// If the clicked project has already been clicked, remove the class and hide the content
$(this).parent().removeClass('clicked');
$(this).parent().find('.proj_content').slideUp('fast');
}else{
// Remove the class and slide the content up on all projects
$('article.project').removeClass('clicked');
$('article.project .proj_content').slideUp('fast');
// Add the class and show the content on the selected project
$(this).parent().addClass('clicked');
$(this).parent().find('.proj_content').slideDown('fast');
// Slide the project to the top after clicking on it
$('html, body').delay(500).animate({
scrollTop: $(this).parent().offset().top
}, 500);
}
});
If someone could help me produce the desired effect, that would be amazing. Thanks in advance!
A couple of things:
Your .slideDown()s use the speed fast, but you're only delaying by 500ms. fast is synonymous with 600ms. In general, I think it's a bad idea to use both as it's very confusing to someone reading your code what fast is.
Rather than using .delay() method, I'd use the complete argument on the slideDown or slideUps, so that once they're complete, you do your scrolling. This makes more sense, as you'd then not have to worry about conflicting timings.
My guess would be that your problem is caused by your transitions taking 600ms, but your scroll only waiting 500ms. At 500ms, it's getting the wrong offset values and scrolling to those.
Perhaps you should consider changing your markup to something like:
$(this).parent().find('.proj_content').slideDown('600', function() {
// Slide the project to the top after clicking on it
$('html, body').animate({
scrollTop: $(this).parent().offset().top
}, 500);
});
* Note: I've changed fast to 600 for clarity's sake.
try this :
$('article.project').on('click','header',function(){
_parent = $(this).parent();
if(_parent.hasClass('clicked')){
// If the clicked project has already been clicked, remove the class and hide the content
_parent.removeClass('clicked');
.find('.proj_content')
.slideUp('fast');
}else{
// Remove the class and slide the content up on all projects
$('article.project').removeClass('clicked')
.children('.proj_content')
.slideUp('fast');
// Add the class and show the content on the selected project
// Slide the project to the top after clicking on it
_parent.addClass('clicked')
.find('.proj_content')
.slideDown('fast',function(){
// callback
$('html, body').animate({ scrollTop: +(_parent.offset().top)+'px' }, 500);
});
}
});

scrollTo a specific div on long scrolling page when page loads

i have a long scrolling page with lots of divs, one below the other. i would like to scroll automatically when you visit (or reload) the site to scroll from top to a specific div near of the bottom. to jump there isnt a problem, but i want the "scroll" effect. ive checked out scrollTo() but i dont get it to work.
my first attempt was something like
$(document).ready(function () {
$.scrollTo('#div5'); });
but it doesnt fire anything. a little bit help needed :)
thanks
Try this:
$('html, body').animate({
scrollTop: $('#div5').offset().top
}, 500);
http://jsfiddle.net/nTwLm/2/

Weird behavior of JavaScript (With jQuery) 'scrollTop' on Android WebView

I have an HTML file with an element inside it with id="start_section".
I want that when the page loads it will scroll down to this element so i added the following scrip:
jQuery(document).ready(function()
{
// scroll 20px above this div
jQuery('html, body').animate({ scrollTop: (jQuery('#start_section').offset().top)-20 }, 800);
});
Now, it's working just perfect on the first time the page is loaded.
But, As soon as the Activity is recreated for some reason, like orientation change, something weird happens: The page is reloaded, and then instead of scrolling down to the specific element, it is scrolling all the way to the bottom of the page.
I tried to disable the cache but it didn't help.
Any Ideas?
Try to just use "jQuery('body')" instead of "jQuery('html, body')"

Categories

Resources