I've got a WordPress menu item with Javascript successfully attached, and I'm trying to make it scroll to the bottom of the page when clicked on. The scrolling itself worked fine, but I found that the page would jump up to the top for a fraction of a second before scrolling down to the bottom. That code looked like this:
$("#menu-item-135").click(function() {
$('html, body').animate({ scrollTop: $(document).height() - $(window).height()}, 500);
});
I googled around for a solution, and ended up with this
$("#menu-item-135").click(function() {
$('html, body').animate({ scrollTop: $(document).height() - $(window).height()}, 500);
return false;
});
All I did was add 'return false;'. That solved the jumping to the top problem, but now the page jumps to the bottom before scrolling instead! Does anyone have any other ideas for what I might try?
window.scrollTo(0, 0);
you need to try this.
Related
I cant solve why animate doesnt work only on one page.
Here is Link: https://tachomaster.pl
For test I add little gray sqaure on the left top corner, if you click this, script should scroll you a little down. As you can see it doesnt work only on main page, on any other it works.
Here is testing script:
$(document).on('click', '.test', function(event){
event.preventDefault();
$('body').animate({
scrollTop: 500
}, 800);
});
you need to hide overflow for all the containers under your body tag
I fix that by changing from
$('body').animate({
scrollTop: 500
}, 800);
to
$('html, body').animate({
scrollTop: 500
}, 800);
I completly dont know why it works that way and didnt work first way ONLY on main page.
Example URL
Here's my issue: When I resize the browser (approx. 320 px width), scroll down and click on the icon (green arrow) „next“ the scroll bar stays at the bottom of the page. What I want to achieve is something like
$(document).ready(function () {
$('html, body').animate({ scrollTop: 0 }, 'slow');
});
so the next page will autoscroll to top, but I've tried with no success. Is there any solution?
Thank you!
I'd add the animation to your (I guess) ajax success function.
success:function(e){
// load the new contents
setTimeout(function(){
$('html, body').animate({ scrollTop: 0 }, 'slow');
},50);
}
If it's not ajax you are using, add it to the button click event handler.
Try this code, I tested it on your site it's working there:
$('button[id^="question"]').click(function(){
$('#header-wrapper').animate({ scrollTop: 0 }, 'slow');
});
Scroll bar is on #header-wrapper element and not body. scrolling body wont do anything since it's already at 0 scroll height.
I'm having a bit of an animation scrolling issue and have exhausted my debugging efforts. In a nutshell, what I'm trying to do is scroll to an open panel on the users click. User clicks on 1 of a series of panels, that panel opens up (animates), and the freshly opened panel scrolls into view. Simple enough.
The problem I'm having is that if I click on a panel that is below an already open panel the scrolling pulls my new open panel half way off screen. If I click a panel above an already open panel it works fine. Not sure what is going on. I'm animating the panel opening with CSS and using jQuery to animate the scrolling. I'm assuming there is some animation queue timing that is causing the issue but I don't know. I even tried to delay the scroll animation to wait for the panel to finish it's animation but that didn't help either. For example:
$('html, body').delay(1000).animate({scrollTop: $(this).offset().top - 75}, 250);
Instead of
$('html, body').animate({scrollTop: $(this).offset().top - 75}, 250);
Anyway, any help would be appreciated. You can find the code I'm working with here: https://jsfiddle.net/66zzudo4/
UPDATE: You can find the working code here: https://jsfiddle.net/66zzudo4/4/
I believe using a timeout would work:
setTimeout(function() {
$('html, body').animate({scrollTop: $(this).offset().top - 75}, 250);
}, 1000);
Or, jquery animate also takes a callback as an argument when the animation finishes:
$('html, body').animate({scrollTop: $(this).offset().top - 75}, function() {
//Animation complete, do something now like animate other stuff.
}, 250);
Try removing the .top
$('html, body').animate({
scrollTop: $(this).offset() - 75
}, 250);
Check it here. It works. https://jsfiddle.net/66zzudo4/1/
This is my jQuery code:
$(document).ready(function(){
$("#home-btn").click(function() {
$('html, body').animate({
scrollTop: $("#header").offset().top // Problem
}, 2000);
});
});
Can offset actually accept a value of bottom?? Since this is one of the links at the bottom of my page and I want to scroll from bottom to top. This brings in the top of the page for a second and then scrolls from bottom to top. How to make a smooth scroll effect?
You say it is a "link", perhaps you just need to prevent the default action of the link:
$("#home-btn").click(function(event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $("#header").offset().top
}, 2000);
});
Otherwise, it seems to work: jsfiddle
How can I jump to the bottom of the page with jQuery?
I don't want a smoother animation, just to 'jump'. All the other questions on this site I found seem to involve an animation.
This will do
$('html, body').scrollTop( $(document).height() );
scrollTop( vHeight );
WITH ANIMATION
$("html, body").animate({ scrollTop: $(document).height() }, "slow");
WITHOUT ANIMATION
$('html, body').scrollTop( $(document).height() );
$('#smthn').scrollTop(99999999999);
99999999999 is the max input for jquery and it can take element to the last scrolling position.
You can use an anchor tag for this, no need of jquery.
Put an anchor tag at the bottom of the page just before </body> tag. such as
<a name="pageend"></a>
And, from where on the page you can jump to the bottom, put another anchor tag just like this.
Jump to page end