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 ^^ :)

Scroll an object to the right

I have a div with an overflow: scroll. How can I make it scroll 20px to the right in javascript?
I tried the following but it doesn't seem work:
document.querySelector('div').scrollTo(20, 0);
It returns that scrollTo isn't a function.

scrollTo is not a function. What you want to use is scrollLeft. This will scroll your div to the right.
document.querySelector('div').scrollLeft = 20;
If you want to scroll 20 pixels to the right every time, use +=
document.querySelector('div').scrollLeft += 20;
If you want to scroll vertically, use the scrollTop property.
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft

Javascript How to keep DIV in window boundary

Hey I have a "box" div which can move its position based on clicking of arrows. How can I keep the Box from going outside the window's bounds or in other words just go to the borders and not cross the boundaries.
Fiddle provided:
var elementStyle = document.getElementById("divId").style;
JSFiddle

I updated your fiddle basically you need to add checks and if your check doesn't pass then set the new position to 0.
if (newPosition < 0) {
elementStyle.top = 0;
} else {
elementStyle.top = newPosition + px;
}
Fiddle here:
https://jsfiddle.net/8t9cqyqd/7/
for bottom and right the window will keep scrolling. If that's not desirable then you need to get the window size and do the same kind of check and then set the right and bottom positions to the container size minus the size of your moving box. I can update the fiddle for that if you'd like.
updated fiddle to handle the "right" direction:
https://jsfiddle.net/8t9cqyqd/9/

Something along these lines:
var x = $("#divID").position();
if(x.left > $(window).width())
//disable up arrow movement
Just do that for all positions changing out width() with height() for the Y position

Javascript scroll and stop when in view

I have this code:
function Scroll(aid){
var aTag = $(\"a[name='\"+ aid +\"']\");
$('html,body').animate({scrollTop: aTag.offset().top},'slow');
}
But the problem is, that it scrolls down to the tag, so it is in the top of the window. I did like to have it, so it only scrolls to the element so it is in the bottom of the window.
So you can see what is on top of the element (like all the other content above it).
Any ideas?

Find out how high the viewport is, and substract that:
var pos = Math.max(aTag.offset().top - $(window).height(), 0);
$('html,body').animate({scrollTop: pos },'slow');
You might need to add a small offset.

issue with $(document).scrollLeft() as a variable

I'm trying to use the left variable to replace '1493' in this code. It works fine when it's a number but when I changed it over to use 'left' the if statement stops working.
$(document).scroll(function () {
var width = $(document).width();
var left = $(document).scrollLeft();
var postCount = $(".post").length;
var columnLength = ( width - ((postCount*743) - 1493)) - (width-(postCount*743));
if(left >= columnLength) {
$(".num").text(left);
}
});
Does anyone have any ideas where I'm going wrong with this? Any pointers would be great.

You may need to force it to be an integer:
var left = parseInt($(document).scrollLeft());

Lets take a look at the math you have really quick.
var columnLength = ( width - ((postCount*743) - 1493)) - (width-(postCount*743));
You are basically cancelling out width, and (postCount*743). It leaves you with --1493 which is positive 1493. The following would have the same effect:
var columnLength = 1493;
So, the reason the if statement fires when you put in the static value 1493, is because columnLength ALWAYS equals 1493 which, of course satisfies this condition:
if (1493 >= columnLength)
You could as easily write:
if (1493 >= 1493)
That said, it should still, theoretically fire when left becomes greater than or equal to 1493. But left is the current horizontal scroll position in pixels. It would be a HUGELY wide page to hit a scroll position of 1493.
Edit: Here's a fiddle to give an idea of how fast the scroll position increases: http://jsfiddle.net/vdQ7B/16/
EDIT 2:
Here is an update in response to your comment.
As I understand it, you were trying to get a horizontal scrollbar that would, essentially, scroll forever.
Please see the following fiddle for a demo: http://jsfiddle.net/vdQ7B/40/
The code is below:
$(document).scroll(function () {
var width = $(document).width();
var left = $(document).scrollLeft();
var viewportwidth = window.innerWidth;
// If our scrollbar gets to the end,
// add 50 more pixels. This could be set
// to anything.
if((left + viewportwidth) === width) {
$("body").css("width", width + 50);
}
});
Per the comments in the code, we simply increase the width of the body if we determine we've reached the end. scrollLeft() will only tell us the number of pixels that are currently not visible to the left of the viewable area. So, we need to know how much viewable area we have, and how much is hidden to the left to know if we've scrolled all the way to the end.
If you have a scroll bar on an inner element, like a div, you'd need to update with width of the div, not the body.
Note: You may also need to use $(window) instead of $(document) to get scrollLeft() to work across all browsers.
Note: See here about using "innerWidth". There are some compatibility issues, and you may need to expand it a bit to handle other cases (IE6).