How to use scrollTop? - javascript

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;
}

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

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);
});

How can I scroll to a certain div onclick?

I have this function
function first_scroll() {
document.getElementById('insert').scrollIntoView();
}
and this button
Button ID="finish" runat="server" Text="Finalize" OnClientClick="first_scroll()"
This button runs some code and I want the page to scroll after running this code. Right now, this scrolls down to the speicific div for less than a second and then after postback, it starts up in the top again.
To solve this, I tried using
<% Page MaintainScrollPositionOnPostback="true" %>
However, this had no effect.
So, how do I make the page scroll after running some code?
Thanks in advance!
First you want to bind a function as the image's click handler:
$('#someImage').click(function () {
// Code to do scrolling happens here
});
That will apply the click handler to an image with id="someImage". If you want to do this to all images, replace '#someImage' with 'img'.
Now for the actual scrolling code:
Get the image offsets (relative to the document):
var offset = $(this).offset(); // Contains .top and .left
Subtract 20 from top and left:
offset.left -= 20;
offset.top -= 20;
Now animate the scroll-top and scroll-left CSS properties of <body> and <html>:
$('html, body').animate({
scrollTop: offset.top,
scrollLeft: offset.left
});
Also, have a look at the jQuery.scrollTo plugin.
Here's a demo.
This is a repeating question from this page.

Using Javascript to find the position in a page

I've a function that scrolls my Index page to a specific anchor tag and changes the background image. The problem I have right now is that I need to use the links in my Menu page to move to the anchors in my Index page and change that background image. My Menu Page appears at the top of my index page.
The Javascript I have for scrolling inside my Index page is:
$('-Button-to-scroll-is-clicked').click(function () {
clearInterval(ID);
$('html, body').animate({
scrollTop: $('-Anchor').position().top
},
3000);
var IntID = setInterval(changeImg, 1500);
function changeImgHome() {
$('.imagemhome').css('background', 'url(-New-Image.jpg) top center no-repeat fixed');
};
ID = IntID;
return false;
});
The Javascript that I have for scrolling my index page from my Menu page is:
$('-Button-In-Menu-Page').click(function () {
$('html, body').animate({
scrollTop: $('-Anchor-In-Index-Page').position().top
},
3000);
return false;
});
As I've said, I need to check in my Index page the position I'm at after scrolling (using the window.scroll function) so I can change the background image appropriately.
Well, first, position gathers the position of the element. By default, elements are placed inline and have a static position and no position coordinantes, so using .position().top will fail to yield the page position unless you've placed all of these things in absolutely.
That's not a problem though, because we have .offset. Offset tells you the x and y positions of the target relative to the document, so we'll use that.
Now our functions should look like this
window.onready = function(){
$(-Button-to-scroll).on('click',function(){
var itemPos = $('target').offset().top;
$('body,html').animate({scrollTop:itemPos},3000);
$('.imagemhome').css('background', 'url(-New-Image.jpg) top center no-repeat fixed');
}
}
EDIT: for your scrolling. This isn't the most efficient way of doing it since it will basically keep rewriting your background image every time the user scrolls.
$('html').on('scroll',function(){
var top = $(this).offset().top
if ((top >= 200)||(top <= 300)){
$('.imagemhome').css('background', 'url(-New-Image.jpg) top center no-repeat fixed');
}
});
Your current position on the page can be retrieved with $(window).scrollTop().

Categories

Resources