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.
Related
I have a situation where I need the page to not be scrollable past a certain point (I have the hero set to 100vh and the user should not be able to scroll at all) and then upon click of a button the scroll prevention is disabled and the user is then automatically smooth scrolled down to an anchor link directly below (basically scroll down 100vh or the full window height). I need a smooth scrolling animation instead of just a quick jump.
I've tried playing around with variations of the following code with no luck. So far it is really buggy and jumps around and when you reload the page the body overflow is set to hidden but the window position is not always at the top of the screen so you still see some of the below the fold content but still cant scroll.
function() {
function smoothScroll(){
windowHeight = $('window').height();
$('html, body').stop.animate({scrollTop: windowHeight}, slow);
}
$('.bottom-nav').on('click', '.fold-trigger', function(event) {
$('.home').css('overflow', 'visible');
setTimeout(smoothScroll(), 1000);
});
};
Fiddle is here: https://jsfiddle.net/njpatten/yxkvnymu/1/
Fixed Code
function smoothScroll(){
windowHeight = $(window).height();
$('html, body').stop().animate({scrollTop: windowHeight}, "slow");
}
$('.bottom-nav').on('click', '.fold-trigger', function(event) {
$('.home').css('overflow', 'visible');
setTimeout(smoothScroll(), 1000);
});
Fixed fiddle: https://jsfiddle.net/yxkvnymu/2/
Explanation
You are trying to get the window height by doing $('window').height() which is searching for a 'window' DOM element which doesn't exist. You want to use $(window).height() (note the omission of quotes surrounding window) because window is not a DOM node, it is an object.
In addition, you are using $('html, body').stop.animate({scrollTop: windowHeight}, slow); which has multiple errors. .stop is invalid because the stop property on the NodeList that is returned from $('html, body') is a function that you want to call. You should be using $('html, body').stop().
Also, the animate portion is referencing a variable slow. jQuery's animate function takes "slow" as a string, so that line should be written as such:
.animate({scrollTop: windowHeight}, "slow");
Note the inclusion of quotes on that because we want to pass a string value of "slow" to jQuery's animate function, instead of a variable slow.
Lastly, you are surrounding all of your code in an anonymous function, which seems unnecessary.
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.
$('.topNavigationBtn').on('click',function (e) {
var target = $(this).attr('targetId');
$("body").animate({ scrollTop: $(target).offset().top }, 1000);
})
Please note this isn't on all IOS devices, but on some, after the first animation, until the user manually scrolls the page the topNavigationBtn's are no longer clickable. Any ideas why this would be would much appreciated.
The answer is to hack.
If you add a div at the bottom of the page, that you change the height of on animate complete, this then lets IOS update the scrollTop, without the user needing to scroll themselves.
J
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/
okay heres the scenario. I have a one page website with may sections using anchor links. Whe the user is on a secondary layout (page) and when they click on to go to a section on the main page again, for some reason the graphics dont load properly until a scroll happens. All I want to do is whenever the main layout is loaded, no matter which anchor it loads to, simply scroll the page up or down by 1 pixel.
$.scrollTo({ top: '+=100px', left: '+=0px' }, 800);
I tried the above, but this code simply takes the user 100 pixels from the top. I don't want that to happen, i.e. not from the top but from where ever the user is on screen.
use jquery scrollTop() to set the scroll position to the current scroll position + 1:
$(window).scrollTop($(window).scrollTop()+1);
I have a similar problem. I want to scroll down 1 pixel and then 1 pixel up, so the user hopefully won't notice anything at all. I did this:
window.scrollBy(0, 1); // 0 pixels horizontal and 1 pixel down
window.scrollBy(0, -1); // 0 pixels horizontal and 1 pixel up
UPDATE:
But I might end up using JQuery instead. All I want is the scroll event to fire and I can do that with:
$(window).scroll();
A pure JavaScript solution without the jQuery overhead:
window.scrollY += 100;
With jQuery (and a fancy animation):
var cur = $(window).scrollTop();
$(window).animate({scrollTop: cur + 100});
$("html, body").animate({scrollTop: ($(window).scrollTop() + 1)});