Develop Reference

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 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)

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);
}
});