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.
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.
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.
Here is the code that i use to animate scroll to specific element.
$('html, body').animate({
scrollTop: $("#establishment3").offset().top
}, 2000);
Question:
How can i animate the scroll to this element but to scroll in 100px from top of the element ?
Thanks in advance!
You can use this way:
$('html, body').animate({
scrollTop: $("#establishment3").offset().top - 100
}, 2000);
scroll in 100px from top of the element
I don't understand whether you wanna go below or above. Give a + 100 if you wanna go below, or - 100 if you wanna go 100px above the element.
I'm trying to get it when the #name div is pressed, the page will scroll to #profile-pic but not having any luck.
$("#name").click(function() {
$('html, body').animate({
scrollTop: $("#profile-pic").offset().top
}, 2000);
});
http://jsfiddle.net/qv9f7p6u/1/
Because the scrollable part is a div, not the page. You need to select the div to scroll.
$('#left-panel').animate({
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