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 code not working for scrolling animation on page

This is my Query code:
$(document).ready(function () {
$('.js--scroll-to-discount').click(function () {
$('html, body').animate({scrollTop: $('js--section-discount-opt').offset().top}, 1000);
});
});
This is the HTML code of the button to be clicked:
<a class="btn btn-full js--scroll-to-discount" href="#">I'm ready Dallas</a>
This is the section the animation should take you within the page:
<section class="discount-city js--section-discount-opt">

you have an error in your code
$(document).ready(function () {
$('.js--scroll-to-discount').click(function () {
$('html, body').animate({scrollTop: $('js--section-discount-opt').offset().top}, 1000);
});
});
should be
$(document).ready(function () {
$('.js--scroll-to-discount').click(function () {
$('html, body').animate({scrollTop: $('.js--section-discount-opt').offset().top}, 1000);
});
});

Why is my jQuery SlideDown animations Laggy/Jumpy?

I have been trying to implement the SlideDown animation to show a div when another div is clicked on.
I have come across many issues which are now sorted, but the main issue is that the jQuery animation is very Laggy and Jumpy
Is there anything I can do to smoothen the animations? I read about an easing plugin - do they help?
Code Here: http://www.bootply.com/a8pRzgsjtl
jQuery:
$(document).ready(function() {
$(".virus").click(function() {
$(".v").siblings().hide();
$(".information").slideDown(2000);
$(".v").fadeIn('slow');
$('html, body').animate({scrollTop:200}, 1000)
});
$(".screenRepair").click(function() {
$(".screenInfo").siblings().hide();
$(".information").slideDown(2000);
$(".screenInfo").fadeIn(1000);
$('html, body').animate({scrollTop:200}, 1000);
});
$(".SoftwareRepair").click(function() {
$(".softwareR").siblings().hide();
$(".information").slideDown('slow');
$(".softwareR").fadeIn('slow');
$('html, body').animate({scrollTop:200}, 1000);
});
$(".MemoryUpgrades").click(function() {
$(".MemoryInfo").siblings().hide();
$(".information").slideDown("slow");
$(".MemoryInfo").fadeIn('slow');
$('html, body').animate({scrollTop:200}, 1000);
});
$(".hardwareRepair").click(function() {
$(".hardwareInfo").siblings().hide();
$(".information").slideDown('slow');
$(".hardwareInfo").fadeIn("slow");
$('html, body').animate({scrollTop:200}, 1000);
});
$(".WindowsReinstall").click(function() {
$(".WindowsInfo").siblings().hide();
$(".information").slideDown("slow");
$(".WindowsInfo").fadeIn("slow");
$('html, body').animate({scrollTop:200}, 1000);
});
$(".DataRecovery").click(function() {
$(".dataInfo").siblings().hide();
$('.information').slideDown('slow');
$(".dataInfo").fadeIn("slow");
$('html, body').animate({scrollTop:200}, 1000);
});
$(".maintenance").click(function() {
$(".maintenanceInfo").siblings().hide();
$('.information').slideDown('slow');
$('html, body').animate({scrollTop:200}, 1000);
$(".maintenanceInfo").fadeIn("slow");
});
$("#close").click(function() {
$(".information").slideUp('slow');
});
});

A common issue is with images, if your elements contains or have images background make sure they are not too heavy...

jQuery run onclick function only once

How can I execute this function only one time?
I tried .one but it doesn't work
$('a.inspire-tag').on('click',function () {
$('html, body').animate({
scrollTop: $(".button-inspire").offset().top
}, 400);
});

If you want to do is just click once to enable
Try this:
$('a.inspire-tag').on('click',function () {
$('html, body').animate({
scrollTop: $(".button-inspire").offset().top
}, 400);
$('a.inspire-tag').off('click');
});

$('a.inspire-tag').on('click',doThis);
function doThis () {
$('html, body').animate({
scrollTop: $(".button-inspire").offset().top
}, 400);
//you can off all on callback function
$('a.inspire-tag').off('click',doThis);
}

Use .off(), with name spaced event names
$('a.inspire-tag').on('click.myevent', function () {
if (...)
// remove current event handler
$(this).off('click.myevent')
});

var oneTime = true;
$('a.inspire-tag').on('click',function () {
if(oneTime) {
$('html, body').animate({
scrollTop: $(".button-inspire").offset().top
}, 400);
oneTime = false;
}
});

var inspiretag = $('a.inspire-tag');
inspiretag.on('click',function () {
$('html, body').animate({
scrollTop: $(".button-inspire").offset().top
}, 400);
inspiretag.off('click');
});
http://api.jquery.com/off/

How to scroll to the particular div using jquery or javascript

I want to scroll to the particular div using jquery
I have written the code like:
$("#button").on('click',function(){
var p = $("#dynamictabstrp");
var offset = p.offset();
window.scrollBy(offset.left, offset.top);
});
But it is not moving to the div position. How can i do that in jquery or javascript

Try this
$("#button").on('click',function() {
$('html, body').animate({
'scrollTop' : $("#dynamictabstrp").position().top
});
});
.scrollTop()

Try
.scrollTop()
$(window).scrollTop($('#dynamictabstrp').offset().top);
or
scrollIntoView()
$('#dynamictabstrp')[0].scrollIntoView(true);
or
document.getElementById('dynamictabstrp').scrollIntoView(true);

Here is the code :-
$(document).ready(function (){
$("#button").on('click',function(){
$('html, body').animate({
scrollTop: $("#dynamictabstrp").offset().top
}, 1000);
});
});
or
$(document).ready(function (){
$("#button").click(function(){
$('html, body').animate({
scrollTop: $("#dynamictabstrp").offset().top
}, 1000);
});
});

Try this simple script. Change #targetDiv with your particular div ID or Class.
$('html,body').animate({
scrollTop: $('#targetDiv').offset().top
}, 1000);
The source code and live demo can be found from here - Smooth scroll to div using jQuery

You can set offset as per requirement
jQuery(document).ready(function(){
function secOffset(){
jQuery('html, body').animate({
scrollTop: jQuery(window.location.hash).offset().top - 60
}, 0);
}
});