We Keep Coding

How to use multiple elements in one set of code for javascript

$(document).ready(function() {
$(".button1").click(function() {
$("html, body").animate({
scrollTop : $("#screen1").offset().top
}, 800);
});
})
$(document).ready(function() {
$(".button2").click(function() {
$("html, body").animate({
scrollTop : $("#screen2").offset().top
}, 800);
});
})
...and so on
I wrote above code in javascript. If button is clicked, it scrolls to #screen position. However, I have several ".button"s and "#screen"s that basically has the same function. I don't want to repeat the same code so I've tried for in statement, but couldn't get it right. In what way can I avoid repeating codes in this situation?

Now, I cant see your HTML code, but my suggestion would be to add the event listener to a parent element to all the buttons and then add info about the button on the button itself. Here I'm using the attribute data-screen to hold info about the "screen".
UPDATE
I refined the jquery a bit. Using on() instead of click() so that I could remove the original if statement. When the event listener is on the parent element more buttons can be added dynamically and they will work as expected.
$(document).ready(function() {
$("#buttons").on("click", "button", function(e) {
var screenid = $(e.target).attr('data-screen');
$("html, body").animate({
scrollTop: $(`#screen${screenid}`).offset().top;
}, 800);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="buttons">
<button data-screen="1">Button 1</button>
<button data-screen="2">Button 2</button>
<button data-screen="3">Button 3</button>
</div>
<div>
<div id="screen1"></div>
<div id="screen2"></div>
<div id="screen3"></div>
</div>

Assuming all the buttons & screens follow the naming convention .button${number} and #screen${number}, you can do this:
const numberOfSections = 5;
$(document).ready(function() {
for (let i = 1; i <= numberOfSections ; i++) {
$(`.button${i}`).click(function() {
$("html, body").animate({
scrollTop : $(`#screen${i}`).offset().top
}, 800);
});
}
});

How to transfer a lot of variables to a function in Javascript

How can I pass many variables to a javascript function? I would like to simplify my code. It is much too long if I have to write an extra function for each variable. Any help will be appreciated. Thank You.
jQuery(document).ready(function ($) {
$('#item1').click(function () {
$('html, body').animate({
scrollTop: $("#div1").offset().top
}, 2000, function () {
revapi8.revcallslidewithid('item-11');;
});
});
$('#item2').click(function () {
$('html, body').animate({
scrollTop: $("#div2").offset().top
}, 2000, function () {
revapi8.revcallslidewithid('item-12');;
});
});
$('#item3').click(function () {
$('html, body').animate({
scrollTop: $("#div3").offset().top
}, 2000, function () {
revapi8.revcallslidewithid('item-13');;
});
});
});

If your elements are as provided in question. This approach will work for you.
jQuery(document).ready(function($) {
var arr = [1,2,3]; //element iterator
arr.forEach(function(item){
$('#item' + item).click(function() {
$('html, body').animate({
scrollTop: $("#div" + item).offset().top
}, 2000, function() {
revapi8.revcallslidewithid('item-1' + item);;
});
});
})
});

You can use data-* prefix cutsom attribute to persists arbitary data with element which can be accessed using .data() or Element.dataset property.
Assign a CSS class i.e. item then use Class Selector (".class") to bind event handler
HTML
<div class='item' data-related-div="#div1" data-related-item="item-11">item 1</div>
<div class='item' data-related-div="#div2" data-related-item="item-12">item 2</div>
<div class='item' data-related-div="#div3" data-related-item="item-13">item 3</div>
Script
$('.item').click(function () {
var div = $(this).data('relatedDiv');//this.dataset.relatedDiv
var item = $(this).data('relatedItem');//this.dataset.relatedItem
$('html, body').animate({
scrollTop: $(div).offset().top
}, 2000, function () {
revapi8.revcallslidewithid(item);;
});
});

You could simple use the jQuery index() method to get the clicked elements index and use the get() method to get the corresponding div element. This will of course only work if the amount of clickable elements is equal to the div elements you want to scroll to.
Here is an example.
var $body = $('html, body');
var $itemsWrap = $('#items-wrap');
var $items = $itemsWrap.find('.item');
var $divs = $('[id^="div"]');
$itemsWrap.on( 'click', function(evt) {
var index = $items.index( evt.target );
$body.animate({ scrollTop: $($divs.get(index)).offset().top }, 666);
});
html, body {
min-height: 100%;
margin: 0;
}
div[id^="div"] {
height: 100vh;
background: tomato;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="items-wrap">
<button class="item">item-1</button>
<button class="item">item-2</button>
<button class="item">item-3</button>
</div>
<div id="div1"><h1>Div 1</h1></div>
<div id="div2"><h1>Div 2</h1></div>
<div id="div3"><h1>Div 3</h1></div>

set time interval for each div

Here is my Code: Demo
The demo is working fine on manual scrolling for each div to scrolltop.
What I need is: If I click the Auto Start button I want to Auto scroll 1, Auto scroll 2, ... Auto scroll n each div to scrolltop.
$(".jumper").on("click", function() {
var links = $(this).attr('href');
var type = links.substring(links.indexOf('#')+1);
$("body, html").animate({
scrollTop: $('#'+type).offset().top
}, 1500);
});
Each div should reach scrolltop and stop, then go to next div scrolltop with same time interval.

This is how I did it:
$(".autostart").on("click", function() {
scrollToElem($("#auto-scroll"));
var scrollList = $("#auto-scroll").nextAll();
var current = 0;
time = setInterval(function() {
scrollToElem($(scrollList.get(current)));
current++;
if (scrollList.length == current) {
clearInterval(time);
}
}, 2000);
});
Here is the JSFiddle demo

You have error in your code. .top of undefined. You can use links as selector as it contains both idselector + id :
$(".jumper").on("click", function() {
var links = $(this).attr('href');
$("body, html").animate({
scrollTop: $(links).offset().top
}, 1500);
});

jQuery Overflow: Hidden on Parent, Detect if Child is Actually On Visible

I'm having an issue with this jQuery that is blowing my mind. I've tried three different JS and jQuery functions people suggested online for accomplishing this and can't seem to get anything to work.
I'm trying to hide the class .arrow-up when .first is actually visible on the screen and hide the class .arrow-down when .last is visible on the screen.
Sounds simple enough, right?
Well the parent element has overflow: hidden on it (like most carousels–they really are from hell). Anyone know how to do this? I'd really appreciate any help, JS really isn't my strongest by any means...
Here's my current jQuery–
jQuery(document).ready(function ($) {
$(".arrow-down").bind("click", function (event) {
event.preventDefault();
$(".vid-list-container").stop().animate({
scrollTop: "+=300"
}, 300);
});
$(".arrow-up").bind("click", function (event) {
event.preventDefault();
$(".vid-list-container").stop().animate({
scrollTop: "-=300"
}, 300);
});
});
In this, .vid-list-container is the parent with overflow: hidden on it and .first and .last are both inside the container. The arrow classes are both outside of the container.
Built this pen for anyone who wants to play around with it.
http://codepen.io/seancrater/pen/waPNEW
Thanks!

This should work. Notice however that I used opacity:0, so the arrow can still be clicked. You need to change that!
function checkDownArrow() {
setTimeout(function() {
if($(".vid-list-container").scrollTop() != 0){
$('.arrow-up').css('opacity',1);
}
if(($(".vid-list-container").scrollTop() + $(".vid-item").height()+5) >= $(".vid-item").length * $(".vid-item").height()) {
$('.arrow-down').css('opacity',0);
}
},350);
}
function checkUpArrow() {
setTimeout(function() {
if($(".vid-list-container").scrollTop() == 0){
$('.arrow-up').css('opacity',0);
}
if(($(".vid-list-container").scrollTop() + $(".vid-item").height()+5) < $(".vid-item").length * $(".vid-item").height()) {
$('.arrow-down').css('opacity',1);
}
},350);
}
checkDownArrow();
checkUpArrow();
jQuery(document).ready(function ($) {
$(".arrow-down").bind("click", function (event) {
event.preventDefault();
$(".vid-list-container").stop().animate({
scrollTop: "+=173"
}, 300);
checkDownArrow();
});
$(".arrow-up").bind("click", function (event) {
event.preventDefault();
$(".vid-list-container").stop().animate({
scrollTop: "-=173"
}, 300);
checkUpArrow();
});
});

EDIT
Okay, I see you have a different problem... may I suggest using a different approach? Something like this.
HTML:
<div class="outer-wrapper">
<div class="inner-wrapper">
<div class="vid-item">
...
</div>
<div class="vid-item">
...
</div>
</div>
</div>
CSS:
.outer-wrapper {width:200px; height:150px; overflow:hidden;}
.inner-wrapper {height:auto; margin-top:0;}
.vid-item {width:200px; height:150px;}
JS:
var itemHeight = $('.vid-item').first().height();
var wrapperHeight = $('.inner-container').height();
$(".arrow-down").bind("click", function (event) {
event.preventDefault();
var margin = parseInt($('.inner-container').css('margin-top'));
if(itemHeight - margin > wrapperHeight) {
$('.inner-container').css('margin-top', (itemHeight-wrapperHeight) + 'px');
$('.arrow-down').addClass('hidden');
}
else {
$('.inner-container').css('margin-top', (margin-itemHeight) + 'px');
}
$('.arrow-up').removeClass('hidden');
});
$(".arrow-up").bind("click", function (event) {
event.preventDefault();
var margin = parseInt($('.inner-container').css('margin-top'));
if(margin + itemHeight >= 0) {
$('.inner-container').css('margin-top', '0');
$('.arrow-up').addClass('hidden');
}
else {
$('.inner-container').css('margin-top', (margin+itemHeight) + 'px');
}
$('.arrow-down').removeClass('hidden');
});

How to make this scroll to div script "smooth"

So I found this script by a user of this site however I can't remember the author. The script is working, however I want it to scroll more "smoothly" than just instantly appear at my desired information. And if possible, have the destination appear 300pixels above the div.
How do I do that?
#general{
margin-top:900px;
height: 100px;
weight: 100px;
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var hashTagActive = "";
$(".scroll").click(function (event) {
if(hashTagActive != this.hash) { //this will prevent if the user click several times the same link to freeze the scroll.
event.preventDefault();
//calculate destination place
var dest = 0;
if ($(this.hash).offset().center > $(document).height() - $(window).height()) {
dest = $(document).height() - $(window).height();
} else {
dest = $(this.hash).offset().center;
}
//go to destination
$('html,body').animate({
scrollTop: dest
}, 2000, 'swing');
hashTagActive = this.hash;
}
});
</script>
<div>
<a class="scroll" href="#general">Hello</a>
</div>
<div id="general">
</div

For a smoother scroll you can use:
$(document).ready(function() {
$("ANCHOR LINK").click(function(event){
event.preventDefault();
$("html, body").animate({scrollTop:$(this.hash).offset().top}, 1000);
});
});
And you see the last number? 1000, make it bigger to make it slower.
The second thing I'm afraid I can't help you with.

How to animate to #id links:
jsfiddle
HTML
Click me!<br>
Google.com
<div id="content"></div>
CSS
#content {
margin-top: 900px;
height: 100px; width: 100px;
background-color: lightgreen;
}
jQuery
$('a').on('click', function (event) {
var target = $(this.hash),
top;
if (target) {
top = target.offset().top;
event.preventDefault();
$('html, body').animate({
scrollTop: top
}, 600, 'swing');
}
});

For smooth scroll to 300px above top of the element, your JavaScript function should look like this :
$(".scroll").click(function (event) {
$('html,body').animate({
scrollTop: ($(this.hash).offset().top - 300)
}, 2000);
event.preventDefault();
});