Jquery code not working for scrolling animation on page - javascript

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

Related

I want to get the Page Number of Foo Table for Server Side Processing

This is my foo table code I can get when Pagination button is clicked want to get the page number of the button click in java script can anyone please help me with this
$(document).ready(function() {
$('.footable').footable();
// $('.footable2').footable();
$('.footable').footable().bind({
'footable_paging': function (e) {
paginateScroll();
}
});
});
function paginateScroll() {
$('html, body').animate({
scrollTop: $(".footable").offset().top
}, 100);
console.log('pagination button clicked'); //remove after test
}

i got it working uses this
$(document).ready(function () {
$('.footable').footable();
$('.footable').footable().bind({
'footable_paging': function (e) {
paginateScroll();
}
});
});
function paginateScroll() {
$('html, body').animate({
scrollTop: $(".footable").offset().top
}, 100);
$("a").click(function () {
var number = $(this).text();
});
}

Using two ScrollTop() functions in jQuery?

I'm building a single page website which uses smooth scrolling to anchors for navigation. I'm also trying to add a 'back to the top' button but can't seem to get the animation working (clicking the button doesn't do anything). I believe it's because I'm using two scrollTop functions. Is this correct and how can I solve this?
// Smooth scrolling for page anchors
$(document).ready(function () {
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').animate({
'scrollTop': $target.offset().top
}, 1000, 'swing');
});
});
// Sticky back to top button
$(document).ready(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 600) {
$('.go-top').fadeIn("500");
} else {
$('.go-top').fadeOut("500");
}
});
$('.go-top').click(function () {
$('html, body').animate({
scrollTop: 0
}, 800);
return false;
});
});

Found the solution - I had to removed the second $(document).ready(function () { line of code.

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

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

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/

Categories

Resources