JQuery scroll animation flashes home screen for split second - javascript

I've coded a menu using bootstrap that scrolls to different parts of my page using JQuery, but for a split second before it scrolls the home screen flashes up. I don't know why it happens or how to stop it.
$("#butHome").click(function() {
$(".nav li").removeClass("active");
$(this).addClass("active");
$('html, body').animate({
scrollTop: $("#home").offset().top
}, 300);
});
$("#but1").click(function() {
$(".nav li").removeClass("active");
$(this).addClass("active");
$('html, body').animate({
scrollTop: $("#section1").offset().top
}, 300);
});
$("#but2").click(function() {
$(".nav li").removeClass("active");
$(this).addClass("active");
$('html, body').animate({
scrollTop: $("#section2").offset().top
}, 300);
});
$("#but3").click(function() {
$(".nav li").removeClass("active");
$(this).addClass("active");
$('html, body').animate({
scrollTop: $("#section3").offset().top
}, 300);
});
$("#but4").click(function() {
$(".nav li").removeClass("active");
$(this).addClass("active");
$('html, body').animate({
scrollTop: $("#section4").offset().top
}, 300);
});

Probably because the anchor link makes the page scroll to the top of the page before the animation starts. You may prevent this default browser behaviour by adding the following within your handler:
$('.upp').click(function(e){
e.preventDefault();
$.scrollTo( '#up', 800 );
});
COPIED

Related

Toggle div after arriving from anchor link

My goal is to create anchor link with smooth scrolling to its destination and after it reaches it, toggle class to open accordion.
I have a hard time achieving a working result. Scroll code is here:
var $root = $('html, body');
$('.calendar a').click(function() {
$root.animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);
return false;
});
I have no hash in my url.
How to include toggle in this scroll code?
Thanks!
There is an "completed" function callback you can stick at the end of the animation, like so:
var $root = $('html, body');
$('.calendar a').click(function() {
$root.animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500, function() {
//DO YOUR TOGGLE HERE
$('#target').toggleClass('myClass')
});
return false;
});
You can simply wait for the animate to complete using a jQuery promise and always. This works better than the animation callbacks (which do not fire if you are already at the final position)
JSFiddle http://jsfiddle.net/fb6yuf9k/1/
e.g.
var $root = $('html, body');
$('.calendar a').click(function () {
var $target = $($.attr(this, 'href'));
$root.animate({
scrollTop: $target.offset().top
}, 500).promise().always(function(){
$target.toggle();
});
return false;
});
For the specific website provided in comment, you want to toggle the element with toggle-content beneath the target element:
e.g.
var $root = $('html, body');
$('.calendar a').click(function () {
var $target = $($.attr(this, 'href'));
$root.animate({
scrollTop: $target.offset().top
}, 500).promise().always(function(){
$target.find('.toggle-content').toggle(); // or toggleClass etc
});
return false;
});

My animations arent working as expected

im trying to fade in a video after 5 seconds, then fade out a video after pressing a button, which then scrolls the page to the next section.
At the next section, it should animate some divs, then....pressing the button to go to the next section, fade out animates the previously animated divs, THEN goes to the next section.
The 3rd scroll button doesn't work at all.
Only the last 2 scroll buttons work....I can't figure out why only these last 2, and not the first 3 week.
NOTE: Id also like to kill the scrollbar on the page, and have the page navigated via the scroll buttons. Here is my code that is giving me trouble:
<script>
$(document).ready(function(){
//Kill Page Scrollbar
$('html, body').css({
'overflow': 'hidden',
'height': '100%'
});
//animate the registration video fading in
$('#Video').fadeTo(3000, 1);
//Make scrollbutton clickable
$('.ScrollButton_White1').click(function(){
//Fade Video out
$('#Video').fadeTo(3000, 0), (function(){
//define the variable "diamonds"
var diamonds = $('#PresenterContainer').children()
//animate the scrolling of the page down to the anchor point//
$('html, body').animate({
scrollTop: $("#PresenterContainer_AnchorPoint").offset().top
}, 5000,
function() {
diamonds.show();
});
});
});
<!--scroll button 2-->
$('.ScrollButton_Gold1').click(function(){
diamonds.hide();
$('html, body').animate({
scrollTop: $("#YouAskedForIt_AnchorPoint").offset().top
}, 5000
);
});
<!--scroll button 3-->
$('.ScrollButton_White3').click(function(){
$('html, body').animate({
scrollTop: $("#ReturnChampion_AnchorPoint").offset().top
}, 5000
);
});
<!--scroll button 4-->
$('.ScrollButton_Gold1').click(function(){
$('html, body').animate({
scrollTop: $("#YouAskedForIt_AnchorPoint").offset().top
}, 5000);
});
<!--scroll button 5-->
$('.ScrollButton_Gold2').click(function(){
$('html, body').animate({
scrollTop: $("#WhatYouWillLearn_AnchorPoint").offset().top
}, 5000);
});
<!--animate presenter diamond buttons-->
<!--$(window).scroll(function(event) {
<!--$('#Diamond_DarrenHardy').addClass('animate_rf');
<!--$('#Diamond_RobertKiyosaki').addClass('animate_rf');-->
<!--});
<!--end jquery script-->
});
</script>
You appear to have a typo in your code
$('#Video').fadeTo(3000, 0), (function() {
//define the variable "diamonds"
var diamonds = $('#PresenterContainer').children()
//animate the scrolling of the page down to the anchor point//
$('html, body').animate({
scrollTop: $("#PresenterContainer_AnchorPoint").offset().top
}, 5000,
function() {
diamonds.show();
});
});
At $('#Video').fadeTo(3000, 0), (function() { If you are looking to use the callback functionality of fadeTo it should be
$('#Video').fadeTo(3000, 0, function() {
//define the variable "diamonds"
var diamonds = $('#PresenterContainer').children()
//animate the scrolling of the page down to the anchor point//
$('html, body').animate({
scrollTop: $("#PresenterContainer_AnchorPoint").offset().top
}, 5000,
function() {
diamonds.show();
});
});

Smooth Scroll Down whilst slideDown

How can I make the page smoothly scroll down a specified amount at the same time as the slideDown? e.g. 75% or 750px
$(document).ready(function(){
$("#block-full-content-thumb-1").click(function(){
$("#panel-1").slideDown("slow");
});
});
$(document).ready(function(){
$("#block-full-content-thumb-1").click(function(){
$("#panel-1").slideDown("slow");
});
});
$(document).ready(function () {
$('#block-full-content-thumb-1').click(function () {
$('html, body').animate({
scrollTop: $('#portfolio-sep').offset().top
}, 'slow');
});
});
$(document).ready(function(){
$("#panel-close").click(function(){
$("#panel-1").slideUp("slow");
});
});
$(document).ready(function () {
$('#panel-close').click(function () {
$('html, body').animate({
scrollTop: $('#portfolio-top').offset().top
}, 'slow');
});
});

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)

jquery scroll issues on ipad

http://jqueryfordesigners.com/demo/scroll-link-nav.html
The link above is more or less what im looking for in terms of the active state responding to the scroll position.
But if one tries this on an ipad the active state sticks in certain places and trying to navigate purely by tapping the buttons, it stops scrolling after the first tap.
Anyone know any fixes for this for the ipad issues?
I have one solution which does the scrolling on all browsers
http://jsfiddle.net/t9mna/1/ all browsers
$("nav ul li a").click(function(){
$(".selected").removeClass("selected");
$(this).addClass("selected");
var $scrollTo = $($(this).attr("href"));
$('html, body').animate({
scrollTop: $scrollTo.offset().top
}, 500);
});
​and another for just iPad, i don't have an iPad so i personally can't test it so let me know how it goes
http://jsfiddle.net/t9mna/3/ just for iPad //not been tested by me
function isiPad() {
return navigator.userAgent.match(/iPad/i);
}
$("nav ul li a").click(function(){
$(".selected").removeClass("selected");
$(this).addClass("selected");
var $scrollTo = $($(this).attr("href"));
$(function() {
if ($(isiPad).length != 1) {
$('html, body').animate({
scrollTop: $scrollTo.offset().top
}, 500);
}
});
});​
$("nav ul li a").click(function(){
$(".selected").removeClass("selected");
$(this).addClass("selected");
var $scrollTo = $($(this).attr("href"));
$(function() {
if ($(isiPad).length != 1) {
$('html, body').animate({
scrollTop: $.scrollTo.offset().top //point
}, 500);
}
});
});​

Categories

Resources