We Keep Coding

scroll to particular div using jquery in all devices and browsers

I have problem in scroll to particular div (id wise),it's works well in desktop but not working mobile devices below (768 px).
I used this code for scroll but it's not working well in mobile.
// Scroll based on devices width
if ($( window ).width() <= 768 ){
$('body').animate({
scrollTop: $("#current-job").offset().top
}, 1000);
}
else {
$('html, body').animate({
scrollTop: $("#current-job").offset().top
}, 1000);
}
Would you please give me the solution for the same ?
Thanks in advance

Ok so there is an issue where mobile webkit just doesn't do that. you COULD build your own animate function and rock an update of some low level prop but let's cheat a bit here.
Scrolling the body is an issue but scrolling a div is not. have a look at this pen.
https://codepen.io/infn8/pen/BYGvjz
This takes a single div, #body-wrapper, as an immediate child of the body and makes it the new window using these styles:
#body-wrapper{
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow-y:auto;
-webkit-overflow-scrolling: touch;
}
Then you can animate the scrolling on that. the -webkit-overflow-scrolling: touch; is what gives the ability to flick and scroll a bunch.
then you add the following JS
jQuery(document).ready(function($) {
$(".scroll-bottom").click(function(event) {
$('#body-wrapper').animate({scrollTop: $(".scroll-top").position().top}, 'fast');
});
$(".scroll-top").click(function(event) {
$('#body-wrapper').animate({scrollTop: $(".scroll-bottom").position().top}, 'fast');
});
});
Notice the swapping of .offset() for .position() this is important because with the overflow in the div the offset becomes incorrect. It's also important because the item you take the position of must have #body-wrapper as its offset parent (more info here) or the calculation will be wrong.
I have made my example scrollable with two buttons and a different layout than yours so it is a reduced test case scenario and nothing else is in the way. this way you can study this and extact the core concepts into your application.
a quick conversion of your original would look like this:
$('#body-wrapper').animate({
scrollTop: $("#current-job").position().top
}, 1000);
hopefully that helps

The one you have in the else block is fine on its own. Just reduce it all to:
$('html, body').animate({
scrollTop: $("#current-job").offset().top
}, 1000);
and it will work. The key is animating both the html and body elements

Javascript Animate ScrollTop Jumps to Top of Window, Then Bottom

I've got a WordPress menu item with Javascript successfully attached, and I'm trying to make it scroll to the bottom of the page when clicked on. The scrolling itself worked fine, but I found that the page would jump up to the top for a fraction of a second before scrolling down to the bottom. That code looked like this:
$("#menu-item-135").click(function() {
$('html, body').animate({ scrollTop: $(document).height() - $(window).height()}, 500);
});
I googled around for a solution, and ended up with this
$("#menu-item-135").click(function() {
$('html, body').animate({ scrollTop: $(document).height() - $(window).height()}, 500);
return false;
});
All I did was add 'return false;'. That solved the jumping to the top problem, but now the page jumps to the bottom before scrolling instead! Does anyone have any other ideas for what I might try?

window.scrollTo(0, 0);
you need to try this.

OnePage scroll down button

On this page:
http://www.petertoth.me/stuff/petertoth_old/www.petertoth.me/index.html
there is a scroll down button, that smoothly scrolls down to the "next page". Anyone recognizes if it's a pre-made jQuery plugin, or a modified one? I've been researching about it quite a while, found out its possible to mimic this one more or less with such approach:
var scrolled=0;
$(document).ready(function(){
$("#downClick").on("click" ,function(){
scrolled=scrolled+100;
$("html, body").animate({
scrollTop: scrolled
});
});
});
or
$('#gdb1').click(function(){
$("html, body").animate({ scrollTop: $(window).height()}, 600);
return false;});
http://jsfiddle.net/uw1hdkaf/20/
but would be more than happy to know how to properly make it with jQuery or without it!

You need to factor in, that the elements need to have an exact height of how much you want to scroll down. Check out this example: http://jsfiddle.net/uw1hdkaf/22/
p {
height: 100px;
margin: 0;
}
The paragraph tag has a set margin of 16px, so you need to remove that. Basically making each element completely 0 in everything.
If you set the height to 100px and scroll down 100px using your script, it will guaranteed scroll down to the next element, as long as you make sure the elements are exactly as tall as you set them.

Jquery scroll-to not scrolling

I'm trying to have it so when the user clicks a link it scrolls down so that the blue area is off the top of the page.
This is my jsFiddle
I think the code would be something like this:
$("#scroll").click(function() {
$('html, body').animate({
scrollTop: $("#jumbo").offset().bottom
}, 2000);
});
However it doesn't seem to work. Can anyone tell me where I have gone wrong please?

offset() only exposes the top and left properties. To get the bottom you need to add the height to top:
$('html, body').animate({
scrollTop: $(".jumbo").offset().top + $(".jumbo").height()
}, 2000);
Updated fiddle
Also, note that in your example jumbo is a class, not an id.

I think you're looking for scrolling to the first .midheight div:
$("#scroll").click(function() {
$('html, body').animate({
scrollTop: $(".midheight:eq(0)").offset().top
}, 2000);
});
Updated Fiddle

You don't need to use jQuery for this, you can simply use anchors.
Anchors are links but with hashes, for example:
<a name="scroll_down"></a>
These can then be targeted with a normal link, but set out like this:
Clicking the link will scroll you down the page to where the anchor is put in your HTML.
For the slow animation that you're after, you can look here and use his code. All credit to him for the code, works great.
Here is your updated fiddle
The good thing about this, is you can easily use to it have links to each of the "features" you had in the fiddle and have an anchor above each so the user can scroll down to the appropriate are easily, and without the need for you to have repeating jQuery code.

jQuery offset fixed header using scrollTop

I'm trying to a create a vertically smooth scrolling website, using jQuery. I am using this JavaScript and this tutorial Smooth Scrolling Website to create the site.
But I'm having trouble with a fixed header, the scrolling works fine but it appears half way down the relevant div because the div is aligning to the top of the page, not just below the fixed header as I would like it too.
I've tried adding an offset to scrollTop but all hell breaks loose on the page, things appearing above the fixed header etc. Just a page mash-up really. If anybody could shed any light it would be greatly appreciated.
$(function() {
$('ul.menu a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500,'easeInOutExpo');
/*
if you don't want to use the easing effects:
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1000);
*/
event.preventDefault();
});
});
I've found this code on StackOverflow (+ $('.fixedheader').outerHeight()) and added it to my code (after scrollTop: $($anchor.attr('href')).offset().top) it does work but seems to have the opposite effect. Anybody know why?

I've solved this,
+ $('.fixedheader').outerHeight()
Should be
- $('.fixedheader').outerHeight()
So silly of me, cheers anyway guys.