Develop Reference

jQuery scroll down page not working

I am trying to make a smooth scroll effect for my page using jQuery. Does anyone know why this doesn't work?
$(document).ready(function() {
$("#button").click(function() {
$(document).animate({
scrollTop: $("#endpoint").offset().top
}, 1100);
});
});
The JSFiddle -> https://jsfiddle.net/1hm56tms/2/

You should animate the Body and not the document.
$("#button").click(function() {
$("body").animate({
scrollTop: $("#endpoint").offset().top
}, 1100);
});
jsfiddle

You need to change document to body or html,
jsfiddle
$(document).ready(function() {
$("#button").click(function() {
$('html, body').animate({
scrollTop: $('#endpoint').offset().top}
, 1000);
});
});

jQuery scroll does not scroll up

I have this code below and the DEMO fiddle.
jQuery(document).ready(function () {
$(window).scroll(function () {
$('html, body').animate({
scrollTop: $('#content').offset().top
}, 1000);
});
});
I'm really confused why I can't scroll up? Anybody can explain to me why and please share some solutions you have.
Any help, is very appreciated.

Alright, this should do what you are asking for. I don't think it is very user friendly, but that is up to you.
Demo Fiddle
//this prevents the animate method from running multiple times.
var scrolling = false;
jQuery(document).ready(function () {
$(window).scroll(function () {
if ( $(window).scrollTop() <= 100 && scrolling === false) {
//set to true to prevent multiple scrolls
scrolling = true;
//run the animation
$('html, body').animate({
scrollTop: $('#content').offset().top
}, 1000, function() {
//when animation is complete, set scrolling to false
scrolling = false;
});
}
});
});

You can't scroll up because your code is wrapped in the scroll() function so it basically locks its position every time you try and scroll with either the mouses scroll wheel or arrow keys. If you amend to the following then it will position itself accordingly when the page first loads.
jQuery(document).ready(function () {
$('html, body').animate({
scrollTop: $('#content').offset().top
}, 1000);
});

Are you trying to have it animate when the link is clicked? If so you need to change your code:
jQuery(document).ready(function () {
$('a').click(function () {
$('html, body').animate({
scrollTop: $('#content').offset().top
}, 1000);
});
});
I would probably add a class or ID value to your link so you can target that one specific link. The code above would apply to all links on your page...although right now there is only the one.
<h1>Scroll to the Content</h1>
jQuery(document).ready(function () {
$('.scrollToContent').click(function () {
$('html, body').animate({
scrollTop: $('#content').offset().top
}, 1000);
});
});

I'm not sure if you will satisfied on this but i found something that can help a little on my problem.
jQuery(document).ready(function () {
$(this).bind('mousewheel', function(e){
if(e.originalEvent.wheelDelta /120 < 1) {
$('html, body').delay(200).animate({
scrollTop: $('#content').offset().top
}, 1000);
}
});
});
DEMO

No need to add the jquery functionality to achieve the requirement that has been asked. Please remove the Jquery code and run the code snippet provided in the fiddle. It is behaving as per the requirement.

how to Scroll to the end of a div in a single scroll

I have a div with 100% height of the screen and i want it to scroll like this website. One little scroll should take me to the end of a division.
$('html, body').animate({
scrollTop: $("#target-element").offset().top
}, 1000);
I was using this code but its not working. Help

This code should works:
$( "body" ).scroll(function() {
$('html, body').animate({
scrollTop: $("#target-element").offset().top
}, 1000);
});

Selection and focus on element of webpage not working (offset)

My question is a little tricky to explain, but I will try anyway. I have two horizontal tabs which, when you click on them, open a text box content. I'm trying to "focus" on them when they get clicked on. I've found a lot of material online but nothing works except for this code I'm showing below:
$(".accordionButton").click(function() {
$('html, body').animate({
scrollTop: $(this).offset().top
}, 500);
});
$(".accordionButtonone").click(function() {
$('html, body').animate({
scrollTop: $(this).offset().top
}, 500);
If I only click on the first accordionButton it works. If I click on the second accordionButton for first, it works. If I click on the first accordionButton after I've clicked on the second it works, but if I click on the second accordionButton after I click on the first it doesn't work: the focus remains at the bottom of the page. I don't know what could be the problem, I'm making some attempt with the animate function (jQuery tutorial) and the offset function (jQuery tutorial) but I would be grateful even only to know what is going wrong...
UPDATE: a partial solution is
$(".accordionButton").click(function() {
$('html, body').animate({
scrollTop: $(this).offset().top
}, 500);
});
$(".accordionButtonone").click(function() {
$('html, body').scrollTop(0);
});

$(".accordionButton").click(function() {
$('html, body').animate({
scrollTop: $(this).nextAll('div .accordionContent').offset().top
}, 500);
});
$(".accordionButtonone").click(function() {
$('html, body').animate({
scrollTop: $(this).nextAll('div .accordionContentone').offset().top
}, 500);
})
You have to put all that into a callback
$('.accordionContent').slideUp('normal', function(){
$(".accordionButtonone").click(function() {
$('html, body').animate({
scrollTop: $(this).nextAll('div .accordionContentone').offset().top
}, 500);
})
});

The solution is NOT elegant, but it works:
$(".accordionButton").click(function() {
$('html, body').animate({
scrollTop: $(this).offset().top
}, 10);
});
$(".accordionButtonone").click(function() {
$('html, body').scrollTop(458);
});

You are making it scroll down by using offset. remove the offset and it will stop scrolling down. also, instead of using individual selectors, why don't you write some code that utilizes jquery's 'this'
$(this)

scrollTop jQuery, scrolling to div with id?

So this is the current code I have
$(document).ready(function() {
$('.abouta').click(function(){
$('html, body').animate({scrollTop:308}, 'slow');
return false;
});
$('.portfolioa').click(function(){
$('html, body').animate({scrollTop:708}, 'slow');
return false;
});
$('.contacta').click(function(){
$('html, body').animate({scrollTop:1108}, 'slow');
return false;
});
});
When you click a link e.g. 'abouta' it scrolls to that specific section of the page. I'd rather do a scrollTo and then the id of a div so that I don't have to keep changing the scrollTo position if I change padding etc. Is there any way?

instead of
$('html, body').animate({scrollTop:xxx}, 'slow');
use
$('html, body').animate({scrollTop:$('#div_id').position().top}, 'slow');
this will return the absolute top position of whatever element you select as #div_id

My solution was the following:
document.getElementById("agent_details").scrollIntoView();

try this:
$('html, body').animate({scrollTop:$('#xxx').position().top}, 'slow');
$('#xxx').focus();

try this
$('#div_id').animate({scrollTop:0}, '500', 'swing');

Use this:
$('html').animate({ scrollTop: $("#yourDiv").offset().top-100 }, "slow");

if you want to scroll just only some div, can use the div id instead of 'html, body'
$('html, body').animate(...
use
$('#mydivid').animate(...