The code I have scrolls through a sequence of divs, each called .container. Each .container has a 100% height, so the user ends up quite far down the page as a result.
Now I am trying to scroll back to the top (using the same .container class) once the user reaches to the bottom of the page.
$('.down').click(function (e) {
var next_container = $(this)
.next(container);
$('html, body')
.animate({
scrollTop: next_container.offset().top
}, 'slow');
});
Is there way for the jQuery to detect that the user is at the bottom of the document, and as a result, scroll to the first .container (rather than the next)?
You can check that there is a next container found. If not, go to the first one:
$('.down').click(function (e) {
var next_container = $(this).next(container);
if (!next_container.length) {
next_container = $(container).first();
}
$('html, body').animate({
scrollTop: next_container.offset().top
}, 'slow');
});
This is assuming your container variable is a string with the selector of the element, ie. ".container"
Related
if I have the following JS code:
//Scroll Down button
$(window).scroll(function () {
if ($(this).scrollDown() > 100) {
$('.containerScroll').fadeIn('slow');
} else {
$('.containerScroll').fadeOut('slow');
}
});
$('.containerScroll').click(function () {
$('html, body').animate({
scrollTop: 0
}, 1500, 'easeInOutExpo');
return false;
});
This basically is for the Back-top-button animation where if the user clicks the button, then it brings the user back to the homepage with smooth scrolling. I would like the opposite. Is there a way to modify the above JS code so that when the user clicks the button, it brings the user to whichever page they desire? Right now, this scrolls all the way to the top and brings the user to only the homepage of the website, but how can I make it so it would bring the user to whichever page on the website?
This is what I have in HTML file:
<a href="#about" class="containerScroll">
<div class="first-scroll"></div>
<div class="second-scroll"></div>
</a>
Basically, I would like the user to go in the about section of the page instead of the homepage. Any suggestions on how to achieve this task?
You can set the scrollTop value to the offset of whatever element you want. For example:
$('html, body').scrollTop($('#about').offset().top);
will set scrollTop to the top of the element with id about by getting its offset.
Or you could use animate as you did in your example:
$('html, body').animate({
'scrollTop': $('#about').offset().top
}, 1500);
Fiddle
Fiddle smooth scroll
to top
window.scrollTo({
top: 0,
behavior: 'smooth'
});
to element
const element = getElementById("someElement");
//you can do it by jquery. no matter
element.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
MDM: scrolIntoView
MDM: scrollTo
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 have a series of news items (alerts and announcements, to be precise), each individually wrapped inside their own <div> tags, set to hide everything but their headline on page load. On clicking any headline (h2) that individual item's details reveal (slideDown), and any other open items collapse (slideUp). Thus only one news item is viewable at a time. All good.
I also have my code set to scrollTop to the top of the recently clicked div when the window width is tablet sized or less (767px). This only works partially.
I know what the problem is, but not the solution.
The problem is that when I click a different news item, it's scrollTop coordinates are off by the height of the div that's being auto-closed. I've banged my head enough, and the solution's probably simple, but I'm not coming up with it.
The page is live here: http://northqueensviewhomes.com/announcement-test
Remember to make your page width less than 767px and refresh (you'll see the layout respond when you're small enough, then click around a few of the top alert items and you'll eventually see one of them scroll way too high, or even down instead of up to the top of the $this div.
Here's my jQuery:
if ($('#bboards').length) {
/* Page Load Cleanup */
$('.announcement_item h2 + div,.alert_item h2 + div').hide().removeClass('toggler');
$('.moreText').removeClass('hidden');
function hideAll() {
$('.announcement_item h2, .alert_item h2').removeClass('toggler').children('.moreText').fadeIn('fast').end().next('div').slideUp('fast');
}
$('.announcement_item h2,.alert_item h2').hover(function() {
$(this).css({
'cursor': 'pointer',
'color': '#BC2E34',
});
}, function() {
$(this).css({
'cursor': 'default',
'color': 'black',
});
}).click(function() {
if ($('.toggler').length) {
var previouslySelected = $('.toggler').parent('div').height();
alert(previouslySelected);
} else {
var previouslySelected = 0;
// alert(previouslySelected);
}
if ($(this).hasClass('toggler')) {
hideAll();
$('.toggler').removeClass('toggler');
$(this).children('.moreText').fadeIn('fast'); //this is the "click to read more… text on the link"
if ($(window).width() <= 767 {
$('html, body').animate({
scrollTop: ($(this).parent('div.well').offset().top - 13)
}, 2222, 'easeInOutExpo');
}
} else {
hideAll();
$(this).addClass('toggler').next('div').slideDown('fast', 'easeInOutQuad');
$(this).children('.moreText').hide(); //this is the "click to read more… text on the link"
if ($(window).width() <= 767) {
$('html, body').animate({
scrollTop: ($(this).parent('div.well').offset().top - 13)
}, 2222, 'easeInOutExpo');
}
}
});
} // <--- End if $('#bboards').length
and you can see the HTML live on the page. I've added a bunch of dummy entries just to create page height.
I'm pretty sure that I just need to delay the scrollTop until the slideUp is complete, but, again, not sure how.
There are two relatively easy solutions you could try.
The first is, as you said, to delay the scrollTop animation:
setTimeout(function() {
$('html, body').animate({
scrollTop: ($(this).parent('div.well').offset().top - 13)
}, 2222, 'easeInOutExpo');
}, 200);
Or, you can record the initial position of every announcement and alert after you hide their contents when the page loads. Change your section labeled /* Page Load Cleanup */ to the following:
/* Page Load Cleanup */
$('.announcement_item h2 + div,.alert_item h2 + div').hide().removeClass('toggler');
$('.moreText').removeClass('hidden');
$('.announcement_item, .alert_item').each(function() {
$(this).data("top", $(this).offset().top);
});
This gives every announcement a data entry that stores its initial position. Then, whenever you need to animate the scrollTop, do the following:
$('html, body').animate({
scrollTop: ($(this).parent('div.well').data().top - 13)
}, 2222, 'easeInOutExpo');
Note that this will only work well if the contents of the announcements and alerts do not change.
I hope this helps!
I have an accordion element, and I need to have different panes expand on hashchange. The code I made, expands it but it doesn't scroll the the targeted div, and page never ends loading.
function hashChange() {
if (window.location.hash === '#senior-backend') {
$('#senior-backend, #backend-developer, #senior-frontend, #frontend, #dev-ops').hide(50);
$('#senior-backend').show(50);
$('#job-posts').removeClass().addClass('beige-bg');
$('#job-posts-top').removeClass().addClass('beige-spikes');
}
}
window.onhashchange = hashChange;
Could you please point out what am I doing wrong.
Thanks
You need to scroll the site using animate once you detect a change in the hash, for example:
var dest = $('#yourSelector').position();
var dtop = dest.top;
$('html, body').animate({
scrollTop: dtop
});
Living demo: http://jsfiddle.net/LZbK8/