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.
Related
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.
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({
I want to scroll down to particularly 90% of my document or body's height, not the screen height of the device. I understand that this example below would scroll down to a certain element of my page or document.
$("html, body").animate({ scrollTop: $("#emptydisplay").offset().top }, 500);
but that is not what I need. I need to scroll down automatically to 90% of whatever my HTML document's height might be. I tried something like this
$('html,body').animate({ scrollTop: $(document).height() * 0.90 });
but it's scrolling down all the way to the bottom.
How do I do this in jquery? Thanks...
scrollTop means the top side of your window. scrollTop: 100% means full height of the page - the height of the window. If you want 90%, you need this:
$('html,body').animate({ scrollTop: $(document).height() * 0.9 - $(window).height() }, 500);
you should remove the window height from document height
$('html,body').animate({ scrollTop: ($(document).height() * 0.90)-$(window).height() });
you should minus window's height
$('html,body').animate({ scrollTop: $(document).height() * 0.90 - $(window).height() });
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.
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