Scroll animation scrolls down only at some point - javascript

Here is my script:
$(document).ready(function () {
$('div').animate({
scrollTop: $('#content').offset().top
}, 'slow');
});
What I want is, the scroll should go at the bottom of the div. Is it possible?

"What I want is, the scroll should go at the bottom of the div"
Now you scroll to the top of the div, because offset().top calculates, where this div starts. If you want to scroll to the bottom of the div, you can simply add the height of the div too, like this:
scrollTop: $('#content').offset().top + $('#content').height()

Related

How to scroll with jQuery (Bottom of element should be at the bottom of the page)

On my HTML page, I have stuff that can be added dynamically by a button.
When the stuff that is added is not in the viewport anymore, I want to scroll to get it into the viewport.
As the added content is always added below the clickable button that adds the stuff i always want to have the bottom of the element to be at the bottom of the viewport after scrolling, but i am just able to put the top of the element at the top of the viewport with that function:
if (!elementInViewport(document.getElementById("ElementId"))){
$([document.documentElement, document.body]).animate({
scrollTop: $("#ElementId").offset().top
}, 2000);
}
There is no scrollBottom instead of scrollTop and when I replace the offset().top with offset().bottom the function doesn't do anything at all.
How can I do that?
Try the scrollIntoView() function:
if (!elementInViewport(document.getElementById("ElementId"))){
document.getElementById("ElementId").scrollIntoView(false);
}

Scroll Position to last in jQuery

How can I scroll my div with class main to last scroll position
means the scroll bar goes automatically at the end
could you try with scrollTop
document.querySelector('.main').scrollTop = document.querySelector('.main').scrollHeight
so you change the height by top position of the scroll
you can use a trick if you put a element at least of the div and the element with an id you can use this code
window.location = ('#id')
If you want to animate it, use this code
$("html, body").animate({ scrollTop: $(document).height() }, "slow");
Make sure you have jQuery on the page you're using this code on

How to use scrollTop?

My page is divided into sections, each section is a div in the size of the screen (100%).
Every section must have a button to scroll down a full screen to the next section.
I am able to scroll one window down, without completely understanding what I do, and how to be able to keep scrolling to next section from every given section.
function nextButton() {
$('html, body').animate({
scrollTop: $(window).height()
}, 1000);
}
That parameter scrollTop is the value determined by calculating the height from top of your browser to the point you want to scroll to.
In the code you provided you are scrolling down for 1 window height by $(window).height() so if you want to scroll to next section (I assume each section has height equal 1 window) you need to multiplies it.
function scrollToSection(sectionNumber) {
$('html, body').animate({
scrollTop: $(window).height() * sectionNumber
}, 1000);
}
// so if you want to scroll to your first section you call this
scrollToSection(1) // and so on
Define a common class your divs (ex: sections)
// Maintain the current div where the last scroll was performed
var index = 0;
function nextButton() {
index += 1;
var divSections = $('.sections');
// Check to see if more divs exist
if (!divSections[index]) return;
$('html, body').animate({
scrollTop: divSections[index].offset().top
}, 1000);
}
You can just use some jQuery smooth scrolling by adding IDs to each div element:
$("html,body").animate({scrollTop: myDiv.offset().top}, "slow");
Adding an event listener for a click or a scroll, and using this as the event handler, will give you what you want.
Try to give each div an id and your button add a anchor tag and reference it in which div you want to target. Then to have animate effect on your CSS add scroll-behaviour: smooth.
<div id="#section-one"></div>
<div id="#section-two"></div>
<a href="#section-one" class="button"/>
<div id="#section-three"></div>
<a href="#section-two" class="button"/>
html {
scroll-behavior: smooth;
}

Changing the window.scroll placement based on a media query?

The site I'm working on has a "mandatory" Header at the top they won't let me remove. My workaround for this was to start the window scroll below that header with a body onLoad event, like such:
<body <?php body_class(); ?> onLoad="window.scroll(0, 100)">
The issue comes up as I'm working on the sites responsive elements. When the screen hits the 400px media query, I hide that div entirely. Which means my site is still scrolling 100px down needlessly.
Is there a way to Change that window.scroll event to NOT scroll down, (or to scroll down less if they make me put the header back on mobile, albeit smaller) based on that media query?
You can play around with this fiddle
JAVASCRIPT:
$(window).load(function () {
$('html, body').animate({
scrollTop: $("#content").offset().top
}, 1000);
});
Basically it scrolls to the element you want to show so if the header is not present the #content top will be 0 so it won't scroll.
Alternatively, you could use the code below which will scroll the site accordingly to the header's height. No header = no height = problem solved.
$(window).load(function () {
$('html, body').animate({
scrollTop: $("#header").height()
}, 1000);
});

Jquery Expanding div - How to scroll to it

Basically I have a docked footer on my site, which sits at the very bottom of the page. I then have an empty div "country_slider" which sits under it, and this can be expanded with jQuery's show and hide functions. The trouble is this, the footer div is already sitting at the bottom of the page via a CSS hack, so when the "country_slider" div expands, it simply goes off the bottom of the page.
I want the div to not only expand, but the page to also scroll down to make it visible. Can anyone tell me the easiest and most hack-free way of doing this?
This is the code I'm using to show the div:
$("#country_slide").show();
$("#country_slide").show(function() {
$("html, body").animate({ scrollTop: $(document).height() });
});
without an animation:
$("#country_slide").show(function() {
$("html, body").scrollTop($(document).height());
});
Use:
$('#country_slide').show(function() {
$('html, body').animate({
scrollTop: $("#country_slide").offset().top
}, 2000);
});

Categories

Resources