jQuery .offset value to bottom - javascript

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

Related

JQuery animate scrollTop doesnt work in one page

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.

Javascript Animate ScrollTop Jumps to Top of Window, Then Bottom

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.

Jquery scroll until element reaches top

I have arrows in the center of my web pages at the end of sections and I was these to allow users to scroll to the next section on click. I have the following code where the first click works but subsequent clicks do not scroll even though the function is being called each time.
$('.scroll').on('click', function(event) {
alert('scroll');
$('html, body').animate({
scrollTop: $(".scroll").offset().top
}, 1000);
});
Can anyone assist? https://jsfiddle.net/avL459sm/2/

You should use current .scroll element you clicked on.
Look at this fiddle: https://jsfiddle.net/avL459sm/3/

Jquery click to scroll

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({

Automatic scroll to top on „next 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.

Categories