Develop Reference

Trigger 2 events on href? Scroll to top, then load

I have a question, I would like to trigger a specific event in javascript or jquery on a webpage. The page has an animation effect during page loads (the screen and content splits in two and slides open revealing the next content). This works fine when the content on the page fits and doesn't need to be scrolled. However when content needs to be scrolled, the effect doesn't look as good. Is there anyway to trigger an href to scroll back to the top of the page and THEN load the href link/target? In basic terms something like "on click scroll to top and then load link" Any help would be great! Thanks

One could use jquerys animate to scroll to the top, then if that finished redirect:
$("a").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow", ()=> location.href = this.href );
return false;
});
try it

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.

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')"

jQuery scrollTo or animate do not scroll page

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);