I'm making a simple function that when you leave a reply, it jumps to you to a reply box and highlights it. It works great, except the box tends to hug the top of the window. I was wondering what a good trick might be to get it to land centered vertical.
Here is my code thus far:
function jump_to(id){
$("html, body").animate({ scrollTop: $(id).offset().top }, 2000);
}
function jump_to(id){
var viewportHalfHt = $(window).height() / 2;
$("html, body").animate({
scrollTop: $(id).offset().top + viewportHalfHt
}, 2000);
}
Related
I am trying to build a simple vertical timeline. You can click up or down to scroll it little by little but I also wanted to have it jump, smooth scroll, to anchors. This somewhat works but the behavior is unpredictable.
This isn't usually difficult but something new for me is that the scrolling behavior is inside a div so the whole page shouldn't be moving.
You can try it in the fiddle. Clicking random buttons will sometimes bring you to the right spot, other times it will just scroll to a random place.
JSFiddle
Here is the basic Jquery.
var step = 280;
var scrolling = false;
$(".scrollUp").bind("click", function (event) {
event.preventDefault();
$("#timeline").animate({
scrollTop: "-=" + step + "px"
});
})
$(".scrollDown").bind("click", function (event) {
event.preventDefault();
$("#timeline").animate({
scrollTop: "+=" + step + "px"
});
})
$('.timelineButton').click(function () {
$('#timeline').animate({
scrollTop: $($(this).attr('href')).offset().top
}, 2000);
return false;
});
A few things need fixing :
Use .position().top (relative to offset parent) instead of .offset().top (relative to document)
Specify the offset parent by styling the #timeline container with position: relative
Because .position() returns dynamically calculated values, .position().top will be the value-you-want minus the current-scrollTop. Therefore you need to add the current-scrollTop back on.
CSS
#timeline {
...
position: relative;
}
Javascript
$('.timelineButton').click(function (event) {
event.preventDefault();
$('#timeline').animate({
scrollTop: $($(this).attr('href')).position().top + $('#timeline').scrollTop()
}, 2000);
});
Demo
Add Ids to each div & use that ID like href="#ID". This will scroll window to that particular section ID given in href
Check this
$('.timelineButton').click(function () {
if($('#timeline').is(':animated')){}else{
$('#timeline').animate({
scrollTop: $($(this).attr('href')).offset().top
}, 2000);
return false;
}
});
.is(':animated') will be tell you if the element is animating, if not, animate it.
It prevent the unpredictable jumps.
EDIT
Best way to prevent this is: .stop().animate
$('.timelineButton').click(function () {
$('#timeline').stop().animate({
scrollTop: $($(this).attr('href')).offset().top
}, 2000);
return false;
});
EDIT V2
Check this Fiddle: https://jsfiddle.net/a489mweh/3/
I have to put the position offset of each elements in an array, becouse every animate in timeline change the offset.top of each element.Check the data-arr="0" over each button, to tell the array what position of the element have to retrieve.Tell me if works.
Cheers
I am using a slider on my web page for that i used jQuery Function
to scroll down
jQuery("#downClick").click(function() {
jQuery("html, body").animate({ scrollTop: jQuery(document).height() }, "slow");
});
to scroll up
jQuery("#upClick").click(function(){ //Click event to scroll to top ==>> Slider
jQuery('html, body').animate({scrollTop : 0},800);
return false;
});
My page is having too much data to display, so when a person clicks on this buttons either he navigates to bottom or top in once.
Does anybody can suggest me how can i change to something like if i want to scroll up it will scroll up with multiple steps not in once.
$('#upClick').on('click', function() {
var scrollIndex = $(window).scrollTop(); // current page position
$(window).scrollTop(y - 150); // scroll up 150px
}
refer this!
I want to scroll my page 1750px from the top with an animation. I tried the following and it doesn't work.
$('#trailer').click(function() {
event.preventDefault();
//$(window).scrollTop(1750); // I want to animate this.
$(window).animate(
{top: 1750},
200);
return false;
});
You need to use scrollTop instead of top and you have to call animate on the body (or both html and body depending on the browser):
$('html, body').animate({
scrollTop: 1750
}, 200);
Fiddle
I am using the following jQuery:
$(".car-hub-header-help").click(function() {
$('html, body').animate({
scrollTop: $(".footer").offset().top
}, 2000);
});
At the moment this will scroll down the page and when the top of the viewport reaches the element it will stop, however I would like the viewport scroll until the bottom of the viewport is inline with the element that I am targeting.
So far I have tried changing top to bottom and that didn't work, any help would be much appreciated.
document.getElementById("div1").scrollIntoView(false);
The idea is to scroll till the element is present at the bottom of the page.
The scroll position from the top = offset position of the element from the top - current window height + height of element
The code will look like
$(".car-hub-header-help").click(function() {
var elTopOffset = $(".footer").offset().top;
var elHeight = $(".footer").height();
var windowHeight = $(window).height();
$('html, body').animate({
scrollTop: elTopOffset - windowHeight + elHeight
}, 2000);
});
Try this please:
$(".car-hub-header-help").click(function() {
$('html, body').animate({
scrollTop: $(".footer").offset().top - $(".footer").height() + $(window).height()
}, 2000);
});
I've got the following code. At the moment, it only scrolls down the height of a variable.
http://jsfiddle.net/tmyie/gF6U3/1/
$('.col100').click(function(e){
e.preventDefault();
var H = $('.col100').outerHeight();
$('html, body').animate({scrollTop: H}, 200);
});
Questions:
Why is it only scrolling once?
Could it be better implemented: so it scrolls through each sibling with each click?
You are scrolling to the same position each time. Easiest would be to calculate the offset position of the next box:
http://jsfiddle.net/B472g/
$('.col100').click(function(e){
e.preventDefault();
var H = $(this).next().offset().top;
$('html, body').animate({scrollTop: H}, 200);
});
Note that this doesn't handle what to do at the last box.. depends on how you want to implement it.
use this - http://jsfiddle.net/gF6U3/3/
$('.col100').click(function(e){
e.preventDefault();
var H = $(this).next('.col100').offset().top;
$('html, body').animate({scrollTop: H}, 200);
});