Using Javascript to find the position in a page - javascript

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().

Related

Autoscroll div (JavaScript)

I've got 2 div's (left div and right div). They are separated by half. On the right div you can see some pictures and on left side, there are information, which could be longer on some days that's the reason why I want to let it autoscroll to the bottom and back to the top.
I got already a Script but my version is scrolling the whole website.:/
My question: where is my mistake?
setInterval(function(){
$("html, body").animate({ scrollTop: $("leftdiv").height() }, 10000);
setTimeout(function() {
$('html, body').animate({scrollTop:0}, 8000);
},1500);
},1500);
https://jsfiddle.net/4gLts2f0/5/
I found a script which can scroll down.:) But I got still a problem: I do not know how I can let him jump back to the top and repeat the process
https://jsfiddle.net/4gLts2f0/7/
Try $("leftdiv").animate({ scrollTop: $("leftdiv").height() }, 10000);
scrollTop is a tricky properties to play with, i personally solved a similar issue calculating the offset from the top of the page with this function:
function getDistanceFromTop(element) {
var yPos = -100;
while(element) {
yPos += (element.offsetTop);
element = element.offsetParent;
}
return yPos;
}
after that i suggest try to use the scroll function from the specific target until you reach the specific point.

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

Scroll to div on clicking the div

Here is the fiddle link https://jsfiddle.net/hitech0101/5vhdm5hy/
$('.block').click( function () {
$('#mainContainer').animate({'width':'20%'}, 1000);
$(this).css({'background-color':'blue'});
$('.block').css({'display':'block','width':'100%'});
$('.second').css({'display':'inline-block'})
});
In the fiddle, i am using jquery to convert the horizontal blocks into vertical blocks. I have changed the block color from red to blue when the block is clicked. When i click a particular block i would the scroll to move to the location of the block in the vertical view. I have tried jquery's scrollTop() method but still could not get it working the way i wanted it to. Please help.
The fiddle is partial representation of the webpage i am working on. There is more content on the original page which i have excluded. The maincontainer is the second container on the page.
No JavaScript necessary. You can specify an element in an anchor's href and it'll scroll it to the top of the window, including itself.
Wrap the div in an anchor or just use the anchor tag itself, they're both wrappers.
<a href="#scrollToMe">
<div id="scrollToMe"></div>
</a>
Just remember that it can only scroll the element into view to the best of its ability, if the item is at the bottom of the parent element the scroll will hit the bottom and it won't be able to go any further.
$(this).get(0).scrollIntoView();
Add this line into the .click function.
Fiddle
I suggest you get the offset top value and animate the #maincontainer to that position
$('.block').click( function () {
$('#mainContainer').animate({'width':'20%'}, 1000);
$(this).css({'background-color':'blue'});
$('.block').css({'display':'block','width':'100%'});
$('.second').css({'display':'inline-block'});
/*below is what i was talking about*/
var pos = $(this).offset();
$('#mainContainer').animate({ scrollTop: pos.top });
});
$(document).on("click", ".block", function() {
var _body_html = $('html, body');
var _scroll_to = $('.scroll-to');
var _top = _scroll_to.offset().top;
_body_html.animate({
scrollTop: _top
}, 1000);
setTimeout(function() {
_body_html.finish();
}, 1000);
});

Prevent page from moving when content is added above clicked button with jQuery

I have three sections on my page, from top to bottom, A, B and C. You click on a button in section C. Now, some content is loaded in section A (above the button you clicked on), e.g. the content uses jQuery's slideDown() method.
Now, section C scrolls a little bit down (because the new content is making it do so). That's what I'd like to prevent. Is there a way that the browser automatically scrolls page to be at the exact same position as before the content loaded?
If you want to make sure that the button does not move on the screen at all, even though content is added above it, this should do it:
$("mybutton").click(function() {
//Save the vertical position of the button before content is added.
var x1 = $(this).offset().top;
//Do whatever the button is suppose to do, including adding the new content.
doAllTheStuff();
//See how much we moved.
var x2 = $(this).offset().top;
var dx = x2 - x1;
//Scroll the same amount to keep the button from moving on the screen.
$(document).scrollTop($(document).scrollTop() + dx);
});
If you are using this functionallity a lot on your page, you might want to wrap up the code a bit nicer. Here is a working JSFiddle.
This might also be interesting reading:
http://kirbysayshi.com/2013/08/19/maintaining-scroll-position-knockoutjs-list.html
Maintain page position while page length changes
jquery - keep window from changing scroll position while prepending items to a list?
You can scroll page to element when click on your button (probably your element).
$('html, body').animate({ scrollTop: $("#element").offset().top }, 2000);
Here an example: https://jsfiddle.net/kmser1uh/
UPDATE
A trick for scroll in the same exactly position is to save the offset of the element in the page after the scroll, and animate the scroll after button click.
The updated example:
https://jsfiddle.net/kmser1uh/2/
This is the save part:
var el;
var elPos;
var clr;
$(window).scroll(function(){
clearTimeout(clr);
clr = setTimeout(function(){
$('.fullWidthBodyElement').each(function(){
if ($(window).scrollTop() > $(this).offset().top &&
$(window).scrollTop() < $(this).offset().top + $(this).height()) {
el = this;
elPos = $(window).scrollTop() - $(this).offset().top;
}
});
},500);
});
And this the resume position:
$('html, body').animate({ scrollTop: ($(el).offset().top + elPos) }, 2000);
You Migt be using # in href attribute in anchor tag usejavascript:void(0);then you page will not get scrolled.

scroll top according to url parameter

I have a site that carries a particular parameter in the URL called "onsale". I would like the page to scroll to a certain div with a class called "bbbb" when the page loads IF the parameter "onsale" is in the URL. Here is my code so far:
var url = window.location.href;
if (url.search("onsale") >= 0) {
//found it, now do something
console.log("yep");
jQuery('html,body').animate({
scrollTop: jQuery(".bbbb").offset().top
});
//jQuery("body")jQuery('.four-column-sales-pod').scrollTop();
}
The scroll effect has two problems.
it is not scrolling the window so that the div "bbbb" is at the top of the page - it scrolls so that it overshoots the div by about half of the div length.
The more confusing issue is that sometimes it will scroll to the div at halfway and othertimes it will scroll to the div at halfway then scroll back to the top of the page. Have no idea what is causing this.
Try this:
$(function() {
var url = window.location.href;
if (url.search('onsale') != -1) {
$('html, body').animate({
scrollTop: $('.bbbb').offset().top
}, 500);
}
});

Categories

Resources