Develop Reference

Scrolling to top with offset depending on size of the screen

The problem is that my scroll function is not scrolling properly on different screen resolutions. Problem is coming from the offset. Is there any way to have offset in percents? I've tried -10% for example but it didn't worked.
$(".scrollto_home").click(function (event) {
event.preventDefault();
var defaultAnchorOffset = 0;
var anchor = $('#home').attr('data-attr-scroll');
var anchorOffset = $('#home').attr('data-scroll-offset');
if (!anchorOffset)
anchorOffset = defaultAnchorOffset;
$('html,body').animate({
scrollTop: $('#home').offset().top - 100 - anchorOffset
}, 500);
});
The problem is that the scroll is going too far when going up on smaller resolutions that 1920x1080

You may try this way. Using timeout function
setTimeout(function(){
$('html body').animate({
scrollTop: $('#home')[0].scrollHeight
},400);
},600);

So let's say you want to scroll 10% (of the screen height) below/above the anchor. You simply set the offset like:
let percentage = 10;
let offset = window.innerHeight / 100 * percentage;
and then add or subtract that offset depending if you want to scroll above or below it.
To get good browser compatibility when getting the screen height, refer to this.
Note: I'm not that used to jQuery so tell me if I'm missing something
Note2: If you're having problems with your jQuery, please consider creating a working JsFiddle so I can test out stuff ^^ :)

Repeatedly scroll infinite scrolling page with jquery

I want to repeatedly scroll to the bottom of the page and back up every 40ms.
$("html, body").animate({ scrollTop: $(document).height() }, 400);
setTimeout(function() {
$('html, body').animate({scrollTop:0}, 400);
},400);
setInterval(function(){
$("html, body").animate({ scrollTop: $(document).height() }, 400);
setTimeout(function() {
$('html, body').animate({scrollTop:0}, 400);
},40);
},80);
So far so good. Only problem is, the page I want to scroll uses infinite scrolling, i.e. each time I scroll to the bottom of the page, the page height ($(document).height()) changes. So instead of scrolling the entire page, it keeps scrolling the same distance as the original height of the page.
The point of the script is to get the full content of the page after scrolling it to the very bottom (i.e. such a number of times that scrolling it once more would not increase the content of the page any longer). How can I modify this script so that it scrolls to the very bottom of the page each time the page height increases?

Have you considered using code like this
$(document).height() - win.height() == win.scrollTop())
or
$(window).scroll(function () {
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
//Add something at the end of the page
}
});

Here is something you could try.
I did not test it... I just wrote it like this.
To initialise it on load, It needs to have two different values in the two Height_ variables.
There is also delays for animation up and down...
Those can be as short as you want.
There is a delay to let the infinite scroll function load the new content.
This one needs to be adjusted wisely.
It should work...
var Height_actual=1;
var Height_mem=0;
var animateDelay_down=400;
var animateDelay_up=400;
var infiniteDelay_load=800;
function forceInfinite(){
// Force infinite scroll to load all it's content
// IF the last known height is NOT the same as the actual.
if(Height_actual!=Height_mem){
// Keep the actual height in "memory" for the next iteration.
Height_mem=$(document).height();
// Going to the bottom
$("html, body").animate({ scrollTop: actualHeight }, animateDelay_down);
// At the end of the animation
// PLUS a delay for the infinite scroll to load the new content.
setTimeout(function() {
// Possibly a new height to keep in "memory".
Height_actual=$(document).height();
// OK, going back to top
$('html, body').animate({scrollTop:0}, animateDelay_up);
},animateDelay_down+infiniteDelay_load);
// Restart the function after all delays.
setTimeout(function() {
forceInfinite();
},animateDelay_down+infiniteDelay_load+animateDelay_up);
}
}
// Init
forceInfinite();

smooth scroll does not work with overflow-y

I am trying to use a smooth scroll and adopted an example I found online. Here is a fiddle with my code
https://jsfiddle.net/4DcNH/144/
I have special conditions set to html and body (basically to offset the page context by 50px from the top to avoid the navbar). Therefore the smooth scroll does not work. Does anybody know a solution to this?
thanks
carl
$(document).ready(function() {
$('a[rel="relativeanchor"]').click(function(){
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 2000);
return false;
});
});

Is this what you're after?
$(document).ready(function () {
if(!/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())){
$('html').css({'overflow-x':'auto','overflow-y':'hidden'});
}
$('a[rel="relativeanchor"]').click(function () {
var $el = $($(this).attr('href'));
$('html, body').stop().animate({
scrollTop: $el.prop('offsetTop')
}, 2000);
return false;
});
});
JSFiddle
Updates were needed in the CSS. The html overflows were removed for chrome, because otherwise, this would not work in Chrome. However, the overflows are needed for Firefox, so they are done by setting it dynamically in the JavaScript (set if not chrome).
If you want to maintain an offset, subtract it from the calculated offset. Given the above, $el.prop('offsetTop') - 50 adds 50px above.

The issue appears to be related to differences in how Chrome scrolls the <body> with height:100%. A discussion of the issue is here: Body set to overflow-y:hidden but page is still scrollable in Chrome
A workable solution is to wrap the scrolling content in <div class="content"> and disable scrolling on <body>.
Here's a JSFiddle to demonstrate the updated behavior: https://jsfiddle.net/f1zv1c5k/5/
To get the scroll to stop at the appropriate point, you need to subtract the vertical offset applied to the <html> tag (using $el.prop('offsetTop') recommended by #vol7ron) when scrolling. Your smooth scroll function would look like this:
$('a[rel="relativeanchor"]').click(function(){
var $el = $($(this).attr('href'));
$('.content').animate({
scrollTop: $el.prop('offsetTop')
}, 2000);
return false;
});

scroll down only work one time in javascript

Here is the javascript code for scrolling down the page :
function down() {
var scrolled=0;
scrolled=scrolled+1000;
$("html, body").animate({scrollTop: scrolled },2500);
}
It works fine but it only works one time. If I click again it won't work. How can I find the way so this work as long as I click?
Any help will be appreciated.

You're using a constant (1000) for where to scroll to the page. Once you hit 1000 pixels from the top, telling it to scroll there again will do nothing.
Are you trying to scroll 1000 px from wherever you're at? To do that, you need to use the scroll distance:
var scrolled = window.pageYOffset;
since you're using jQuery you can also use
$(window).scrollTop();

You’re always scrolling to the same position (1000). Whenever you call down(), you set scrolled to 0.
You’ll need to define the scrolled variable outside the function scope.
Example:
(function () {
var scrolled = 0;
function down() {
scrolled=scrolled+1000;
$("html, body").animate({scrollTop: scrolled },2500);
}
$('#scroll').click(down);
}());
(Assuming your button or link element that should trigger the scroll has the ID scroll)

If you wаnt scroll +1000px whenever you call down, try this:
var down = (function() {
var scrolled=0;
return function() {
scrolled += 1000;
$("html, body").animate({scrollTop: scrolled },2500);
}
})();

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