scrollTo() and jquery scrollTop() not working in Chrome - javascript

I am making a puzzle platformer using html elements as obstacles. Some levels I want to start at the bottom of the document. So I tried using
$(document).ready(function() {
$(document).scrollTop($(document).height() - $(window).height());
}
and
$(document).ready(function() {
window.scrollTo(0, document.body.scrollHeight);
}
they both work perfectly fine in Firefox but neither work in Chrome. I only could get it to work when animating the scroll which will not work for what I am trying to do.
edit: I am not using jQuery.toScroll() I tried vanilla toScroll and jQuery.scrollTop()

Browsers attach their scrollbars to the page differently. Use $('html,body').scrollTop(). You should also use $(window).innerHeight(). Like this...
$('html,body').scrollTop($(document).height() - $(window).innerHeight());
//Or to smooth scroll it
$('html,body').animate({
scrollTop: $(document).height() - $(window).innerHeight()
}, 1000);
Note: $(document).height() will return the same value as $(window).innerHeight() if the document is shorter than the window.

I did not execute full testing but I'm also experiencing the issue via Developer Tools at least on a specific jQuery version and latest Chrome. animate does work. scrollTop and scrollTo do both not work. Nonetheless even if you explicitly said that you not want to use animate I still recommend it as it is working and I see no reason of not using it if you use it like this:
$('html, body').animate({scrollTop: 500}, 0);
This will scroll to 500px and has no animation at all because the duration is set to 0. I also have to point on a previous issue with Chrome:
Possible duplicate
Issue on Github
I know the issue is closed but it might be relevant and probably it should be reported because there is something fishy.

Related

Using jquery animation angular 5 animation way(for smooth scroll)

I am using jquery for smooth scroll this way
$('.parent-class').animate({
scrollTop: $('#scrllhere').offset().top + 10
}, 800);
Goal here is on click, i am calling one function based on certain condition i am using above code for scroll this is working fine but i want to achieve same using angular 5 animation without using jquery.
my function is like this
smoothScroll(){
$('.parent-class').animate({
scrollTop: $('#scrllhere').offset().top + 10
}, 800);
}
Now i want to achieve same thing without using jquery
After going through angular5 animation docs https://angular.io/guide/animations
I am little confused how to use animate() on the fly for scrolling
Note that there is no state change involved just scrolling
Edit: Even solution in Javascript without using jquery is fine.
Thanks

How to scroll the page smoothly?

I need to scroll the page on load to a certain position on the page in an animated manner. And it works fine (using jQuery's animate):
$(document).ready(function () {
$('html, body').animate({
scrollTop: $('#today').offset().top - 50
}, 800, "linear");
});
However, one thing that it is not is smooth. Particularly on a mobile device it feels very jerky.
I've seen some CSS animations (using transition and transform) that are very smooth but can't figure out how to apply it to page scrolling. Is it possible to do what I want using CSS?
Try setting the following css:
<style type="text/css">
html {
scroll-behavior: smooth !important;
}
</style>
You could also try using vanilla JavaScript instead of jQuery:
function showIt(el_id) {
var el = document.getElementById(el_id);
el.scrollIntoView(true, {behavior: "smooth"});
}
showIt('today')
Also consider adding an itermediary element in the middle of the page, example:
<div id="middle" style="display: none;"></div>
function showIt(el_id) {
var middle_el = document.getElementById('middle');
var el = document.getElementById(el_id);
middle_el.scrollIntoView(true, {behavior: "instant"}); // Go to middle directly and then scroll slowly to #today.
el.scrollIntoView(true, {behavior: "smooth"});
}
showIt('today')
More info on scrollIntoView: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
Also you might be interest in: Scrolling slow on mobile/ios when using overflow:Scroll if you are on iOS
Try using easeOutCubic or another easing function (choose one here):
$(document).ready(function () {
$('html, body').animate({
scrollTop: $('#today').offset().top - 50
}, 800, "easeOutCubic");
});
The best solution for cross-browser/cross-device decent smooth scrollTop I found is using velocity.js. It's faster than jQuery's animate, quite light and supports multiple syntaxes, one of them being the one used by jQuery.animate(), so all you need to do is to replace .animate() with .velocity() (and loading the thing, of course).
I know there might be other solutions out there, but this one has been solid for years, they are always keeping it up to date, I'd say it's a keeper in any serious frontend web developer's tools. You'll find some very fancy names on velocity's libscore page. And no, I'm not affiliated. I'm just thankful for being able to use it for free.

ScrollTop works in Chrome and Edge but not Firefox

So I have a JavaScript function that scrolls to the desired element when that part of the navigation bar is clicked. It works fine in Chrome and Edge, but not Firefox or IE.
The function:
$('html', 'body').animate({
scrollTop:$('.'+nextView).offset().top}, 1500
);
nextView is a variable from another function where it determines which part of the nav was clicked. Basically, it contains the name of the div to be scrolled into view.
Anyone know why it doesn't work? Or an alternative method of auto scrolling that will work?
Try .position() instead of .offset() to see if that works. Might require some correction.
EDIT: it's probably related to your selector. Use html, body as 1 string:
$('html, body').animate({
scrollTop:$('.'+nextView).offset().top}, 1500
);
I made a slight change to the code and now it seems to work. I find the position of the element to be scrolled to before the animate call, then put that variable into the scrollTop and it works now, even in IE!
scrollPos = $('.'+nextView).offset().top;
$('html, body').animate({
scrollTop: scrollPos
}, 1500);

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.

$(window).scroll in vanilla JavaScript

What's the equivalent of the following in plain JS?
$(window).scroll(function() { });
I'm also looking to animate scroll, e.g.:
$('html, body').animate({scrollTop:1750}, 'slow');
Should I be using requestAnimationFrame?
http://paulirish.com/2011/requestanimationframe-for-smart-animating/
Are there any examples that trigger an animation once on click and not continuous renders?
Question 1
window.onscroll = function() {
console.log('scrolling');
};
or if your targeted browsers support addEventListener :
window.addEventListener('scroll', function() {
console.log('scrolling');
});
Question 2
In my opinion, if you're just scrolling from one section to a another section of your page, and not having some sort of constantly running scrolling movement, you're fine doing this without using requestAnimationFrame.
You can find good implementations of scrolling to a particular part of the window in pure javascript, I suggest checking out their source(or even using them).

Categories

Resources