Develop Reference

how to scroll the div with the help of button click

i have created the div , in that i have some multiple buttons when user wants to scroll down he can click on down arrow button for scrolling up he can click up arrow button , my problem is when we click on arrow buttons scroll takes me end of the div , i want to scroll by pixels how to do it ?
// this is for scrolling down
//Require jQuery
function scrollSmoothToBottom (id) {
var div = document.getElementById(id);
$('#' + id).animate({
scrollTop: div.scrollHeight - div.clientHeight
}, 500);
}
//Require jQuery
function scrollSmoothToTop (id) {
var div = document.getElementById(id);
$('#' + id).animate({
scrollTop: 0
}, 500);
}

I looked over your code and tried googling .animate()
https://api.jquery.com/animate/
and scrollTop
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop
and came up with this idea:
function scrollSmoothDown (id) {
var div = document.getElementById(id);
var howManyPixelsToScroll = 5; //change to any number
$('#' + id).animate({
scrollTop: div.scrollTop + howManyPixelsToScroll // not sure about this syntax
}, 500);
}
If my syntax inside the animate method is right, then this would work and the complementary scrollSmoothUp function would just use a negative number instead of a positive number for howManyPixelsToScroll.
(If you had been able to post a working snippet I could have copied that code and tested these changes, but I don't work much with jQuery, so this is just my best guess, not tested.)

Changing background image referred to each menu item only by scrolling

I'm developing a wordpress theme that has a function of changing background image by hovering menu item(each menu item is attached different image). On mobile, I'd like to change background image just by scrolling so that viewers don't need to click each menu to change the background image.
This is the method I implemented to change background by hovering.
http://codepen.io/nummelin/pen/kzaso
// When any of the a's inside of sidebarContainer are hovered
$( ".sidebarContainer a" ).hover(function() {
// Removes all previous classes but keeps sidebar1
$('.sidebar1').removeClass().addClass('sidebar1');
// Splits up the URL on the current href
var URI = $(this).attr('href').split('/');
console.log(URI[2]);
// Applies the last part of the URL to sidebar1
$('.sidebar1').addClass(URI[2]);
});
Achieving with scrolling, I think I need a function that hovering menu item by its position like the image below.
Does anyone have any ideas how to achieve this? I've been exploring a plugin or sample code similar to this, but haven't found any...
Any advices would be appreciated.

Okay, so this is the code I wrote. Hope it helps. I've worked on cross-fading effect but it wasn't that easy. If someone tried please teach me how to do it.
Demo on Codepen:
http://codepen.io/bavavava/pen/rrNpaY
jQuery(function($){
'use strict';
$(document).ready(function(){
var elem = $('li.list-item'),
$listPosition = $.map(elem, function(el, i) { return $(el).offset().top; }),
$listURL = $.map(elem, function(el,i) { return $(el).find('a').attr('href'); }),
$bg = $('.container');
console.log($listPosition);
console.log($listURL);
//PRELOAD IMAGES
$.fn.preload = function() {
this.each(function(){
$('<img/>')[0].src = this;
});
}
$($listURL).preload();
//SCROLL CHANGE
$(window).on('scroll', function () {
var windowScroll = $(this).scrollTop();
$.each($listPosition, function (i, pos) {
if (windowScroll >= pos) {
$bg.css('background', 'url(' + $listURL[i] + '), black no-repeat center center fixed');
}
});
});
});
});

Create custom slider jquery?

I am trying to create custom carousel with thumbnails. I have 2 buttons(left and right arrows), which must simulate clicks on thumbnails. Created this code, but I want to show previous image on the left click, no matter how many times I clicked on the right arrow.
var clicks= 0;
$('#rightarrow').on('click', function(){
clicks += 1;
$( ".thumbnail").eq(clicks).trigger("click");
})
var leftClicks = $('.thumbnail').length;
$('#leftarrow').on('click', function(){
leftClicks -= 1;
$( ".thumbnail").eq(leftClicks).trigger("click");
})

Try to use the clicks variable instead of leftClicks
$('#leftarrow').on('click', function(){
clicks -= 1;
$( ".thumbnail").eq(clicks).trigger("click");
})

Jquery positioning with position()

I want to make something like this:
So when I click on text "Hi, ..." it toggle(); dropdown menu and positions that menu like on image.
But when I resize browser I get something like this:
Here is jsfiddle

Put your code :
var x = $(".icons").position();
document.getElementById("user_menu").style.left = x.left + "px";
Inside $(".icons").click(function(){
It will recalculate the position each time you click to open the dropdown.
Edit :
You can also bind the position to the window.onresize event :
$(".icons").click(function(){
$("#user_menu").toggle();
calculatePosition();
});
$(window).resize(calculatePosition);
function calculatePosition() {
var x = $(".icons").position();
document.getElementById("user_menu").style.left = x.left + "px";
}
Thanks to the code above, your element will be repositionned when you resize the window (avoid the offset when the dropdown is opened)

How to stop jquery animate at onclick?

I'm new in jquery, I don't know much about it, but I need it because I'm building a template...Here is situation, I have a div which I want to slide in to page ( from outside, top) when I click on link, and when I click anywhere else on the page to slide out... This is what I have:
var tmpl_name = '<?php echo $this->template ?>';
jQuery(document).ready(function() {
jQuery('#link').click(function() {
var topy = jQuery('#div');
topy.delay(0).animate({
top: parseInt(topy.css('top')) == 0 ? -topy.outerWidth() : 10
},500, 'easeInOutCirc', function() {jQuery(this);});
});
});
...and it works well,when I click on link div slide in to page, but I don't know how to achieve when I click anywhere else on page to slide out the div, I have tried to add:
jQuery('body').click(function() {
var topy = jQuery('#div');
topy.delay(0).animate({
top: parseInt(topy.css('top')) == 0 ? -topy.outerWidth() : -500
},1000, 'easeInOutCirc', function() {jQuery(this);});
});
...but problem is when I click on link to slide in div, div goes in and out of page ( probably because link is also in body and this second part of code affects it too.
Thanks for your time...Best regards

try:
jQuery(document).ready(function() {
jQuery('#link').click(function(e) {
e.preventDefault();
var topy = jQuery('#div');
topy.delay(0).animate({
top: parseInt(topy.css('top')) == 0 ? -topy.outerWidth() : 10
},500, 'easeInOutCirc', function() {jQuery(this);});
});
});
To kill the event propagation to the document object

The .stop() function can be chained at the beginning of your call as well at the end to stop any animations.
i.e. $("#element").stop().bounce().stop();