When I call $("body").animate({scrollTop: someValue}); I want $(window).scroll(function() { }); to be called too. How can I achieve that?
I have tried with $(window).trigger("scroll") and $(window).triggerHandler("scroll") without success.
The code
EDIT:
Problem solved. There was an if in my $(window).scroll(function() { }); that caused the problem.
Just use:
// Trigger the scroll event
$(window).scroll();
Source:
http://www.w3schools.com/jquery/event_scroll.asp
https://api.jquery.com/scroll/
Apply it to both body and html as it is not consistent.. (for example, FF uses the html for scrolling while chrome uses the body)
$("html, body").animate({scrollTop: someValue});
demo at http://jsfiddle.net/vzyVh/
You can try below code - here i am scrolling to top of my div tag which has id "one".
$('html,body').animate({ scrollTop: $('#one').offset().top }, 'slow');
Related
I'm using the scrollTo plugin by Ariel Flesler to scroll to an element. However this piece of code just doesn't run on Firefox (v 61).
$(document).ready(function(){
$('html, body').scrollTo(document.getElementById('login-link'), 800);
});
Here's a demo: https://jsfiddle.net/1n26s3dm/1/
Any idea what am I doing wrong?
Add the following code and make sure you have jQuery installed, because on your fiddle there isn't jquery
$('html, body').animate({
scrollTop: $("#login-link").offset().top
}, 800, function(){
// this is the callback after the animation is done
// you can emit events here
$("#login-link").trigger('click');
});
Your example on jsfiddle doesn't work. If you need jQuery you should select this library in JS window. Do not use Resources for include jQuery.
Try my example
Also try do not mix jQuery and Vanilla.js to work with DOM. Would be better if you change your code like this:
$(document).ready(function(){
$('html, body').scrollTo($('#login-link'), 800);
});
I have a button used to scroll back to the top of the page when clicked.
I want to have an animation effect.
$("#back-to-top").click(function() {
$(document.body).animate({scrollTop: 0}, 800);
return false;
});
When I click on the button, it did scroll back to top. However, I can't scroll down and it seemed when I scroll down the function is called.
When I use
$(document).scrollTop(0);
it works well.
What's the problem?
Here's my Fiddle
I'm new to Fiddle, it just didn't work!
Try like this
$("#back-to-top").click(function(e) {
e.preventDefault();
$("body, html").animate({scrollTop: 0}, 800);
});
Update
According to your fiddle, you have to put this function outside of $(window).scroll( function() {});
Your problem is actually browser based, I tested this in Firefox which it didn't work. I then tested it in Chrome and it worked fine. Try using $('html, body').animate({scrollTop:0},500); instead.
I have read this is the correct way to get scroll to and animation working in Jquery with the body and html tags. However, this also fires the callback multiple times event if $("body, html") shows only two items in a list. At the most I would think 2, after each iteration it can go up which I'm not sure why, but I need to execute the callback one time with his setup? Any fix?
$("body, html").animate({ scrollTop: top }, function () {
animateScroll($topItem);
});
With $("body, html") you're selecting two elements to animate, first body and second html. That's because two callbacks are fired, just like it should be.
See explanation here: Callback of .animate() gets called twice jquery
Try to change your code as follows:
$("html body").animate({ scrollTop: top }, function () {
animateScroll($topItem);
});
you can try this workaround:
var callbackFired=false;
$("body, html").animate({ scrollTop: top }, function () {
if(!callbackFired){
animateScroll($topItem);
callbackFired=true;
}
});
This did it for me.
$("body, html").animate({ scrollTop: top }).promise().done(function() {
animateScroll($topItem);
});
Can someone help me turn my code into one that will animate the scroll. I've been researching and trying to do it myself but I'm obviously not doing something correctly.
Here is my JS:
$(function() { //When the document loads
$(".jrm-menu-whyus > a").bind("click", function() {
$(window).scrollTop($("#menu-jrm").offset().top);
return false;
});
});
Thanks!
It works fine, just want to animate the scroll.
Use jQuery.animate():
$("html, body").animate({scrollTop: $("#menu-jrm").offset().top});
jQuery.animate documentation
I have a portion of jQuery that just doesn't seem to be working correctly. I have a link to click, [show/hide] which should slideToggle a div. At the same time, I want to animate it so that the page scrolls to the top of the div. It works when I put the animate function inside the slideToggle function, like in this jfiddle.
However, this means that the div i want slides out, and then the page scrolls down. id like to set it up so that both happen simultatneously, which I tried to do in this jfiddle but it simply doesn't work. I also tried doing the scroll animation first, then the slideToggle, which didn't work - is there a way to implement this also?? Cheers!
$(document).ready(function () {
$('.click_to_hide').click(function () {
var visible = $('.hide_on_click').is(":visible");
$('.hide_on_click').slideToggle(500);
if (!visible) {
$('html, body').animate({
scrollTop: $('.hide_on_click').offset().top
}, 500);
}
});
});
http://fiddle.jshell.net/YFR2e/3/
$(document).ready(function () {
$('.click_to_hide').click(function () {
$('.hide_on_click').slideToggle(500);
if($('.hide_on_click').is(':visible')){
$('html, body').animate({
scrollTop: $('.hide_on_click').offset().top
}, 500);
}
});
});
try to put it in the same function