Why is my jQuery animate function not working?Is it possible to animate scrollTop with jQuery?Is there an “exists” function for jQuery?How do JavaScript closures work?Add table row in jQueryHow do I check if an element is hidden in jQuery?var functionName = function() vs function functionName() Setting “checked” for a checkbox with jQuery?How to check whether a checkbox is checked in jQuery?Why does Google prepend while(1); to their JSON responses?jQuery scroll to element“Thinking in AngularJS” if I have a jQuery background?
2019 2-letters 33-length list
Find the closest three-digit hex colour
How useful would a hydroelectric power plant be in the post-apocalypse world?
Are the plates of a battery really charged?
Why did the Middle Kingdom stop building pyramid tombs?
Is a ccH, ccX and ccH equivalent to a cH, ccX and cH sequence?
Reaction mechanism of rearrangement
Book about a new laser rifle built by a new inventor
Why is my 401k manager recommending me to save more?
Why will we fail creating a self sustaining off world colony?
Does "boire un jus" tend to mean "coffee" or "juice of fruit"?
My mom helped me cosign a car and now she wants to take it
What does this Pokemon Trainer mean by saying the player is "SHELLOS"?
Avoiding repetition when using the "snprintf idiom" to write text
What is this fluorinated organic substance?
Is it theoretically possible to hack printer using scanner tray?
Other homotopy invariants?
Searching for single buildings in QGIS
How to idiomatically express the idea "if you can cheat without being caught, do it"
Why is the saxophone not common in classical repertoire?
What caused the flashes in the video footage of Chernobyl?
Synthesis of an epoxide from 1,2-diol
Trace in the category of propositional statements
Advantages of using bra-ket notation
Why is my jQuery animate function not working?
Is it possible to animate scrollTop with jQuery?Is there an “exists” function for jQuery?How do JavaScript closures work?Add table row in jQueryHow do I check if an element is hidden in jQuery?var functionName = function() vs function functionName() Setting “checked” for a checkbox with jQuery?How to check whether a checkbox is checked in jQuery?Why does Google prepend while(1); to their JSON responses?jQuery scroll to element“Thinking in AngularJS” if I have a jQuery background?
I am creating a scroll-down button and also I am creating a scroll-to-top button.
I have created both buttons but when I click on any of them they are not scrolling and I do not know why is that. I have tried everything and still is not working. I have even used a code which works perfectly on other websites that I have developed but still nothing..
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" name="viewport" />
<!--<link rel="shortcut icon" href="icons/favicon.ico" type="image/x-icon">
<link rel="icon" href="icons/favicon.ico" type="image/x-icon">-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link title="main_css" rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
</script-->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
<script src="js/main.js" type="text/javascript"></script>
</head>
<body style="background:#FFF !important;">
<a id="button"></a> <!-- THIS IS THE SCROLL TO TOP BUTTON -->
<!--NAVIGATION AND HEADER SECTION-->
<nav class="navbar about-navbar">
<a href="index.html" class="navbar-brand">
<img class="logo-desktop" src="icons/logo-white.svg">
<img class="logo-small" src="icons/logo-white.svg">
</a>
<ul class="nav justify-content-end">
<li class="nav-item about-nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item about-nav-item">
<a class="nav-link active" href="about.html">About</a>
</li>
<li class="nav-item about-nav-item">
<a class="nav-link" href="gallery.html">Gallery</a>
</li>
<li class="nav-item about-nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
<div class="push-button">
<div class="top-line"></div>
<div class="middle-line"></div>
<div class="middle-line under"></div>
<div class="bottom-line"></div>
</div>
</ul>
</nav>
<div class="container-fluid header-section about-header-section">
<div class="about-bg"></div>
<div class="inside-element">
<div class="col-12 col-lg-8 about-section-text">
<div class="main-heading-text-box about-main-box">
<h1 class="font-weight-light">We <span style="color: #16E1F5;">care</span> about people</h1>
<h5 class="lead">Give a helping hand for poor people</h5>
<a href="donate.html" class="about-donate-btn donate_button">
<p class="first">Donate</p>
<p class="second">Donate</p>
<img src="icons/right_white.svg" alt="">
</a>
</div>
</div>
<!-- THIS IS THE SCROLL DOWN BUTTON -->
<div class="scroll-down">Scroll</div>
<div class="vertical-divider"></div>
</div>
</div>
Below is the code in main.js:
$(document).ready(function ()
$(".scroll-down").click(function ()
return $("html, body").animate(
scrollTop: $("#about").offset().top - 64
, 800);
);
var $document = $(document),
$element1 = $('#button'),
changed = 'show';
if ($document.scrollTop() >= 500)
$element1.removeClass(changed);
else
$element1.addClass(changed);
$(window).scroll(function ()
var $document = $(document),
$element1 = $('#button'),
changed = 'show';
if ($document.scrollTop() >= 150)
$element1.removeClass(changed);
else
$element1.addClass(changed);
);
$('#button').click(function ()
$("html, body").animate( scrollTop: 0 , 100);
return false;
);
);
javascript jquery jquery-ui
edited Mar 25 at 16:54
Taplar
19.6k3 gold badges15 silver badges29 bronze badges
asked Mar 25 at 16:50
Viktor GavrilovicViktor Gavrilovic
236 bronze badges
add a comment |
I am creating a scroll-down button and also I am creating a scroll-to-top button.
I have created both buttons but when I click on any of them they are not scrolling and I do not know why is that. I have tried everything and still is not working. I have even used a code which works perfectly on other websites that I have developed but still nothing..
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" name="viewport" />
<!--<link rel="shortcut icon" href="icons/favicon.ico" type="image/x-icon">
<link rel="icon" href="icons/favicon.ico" type="image/x-icon">-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link title="main_css" rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
</script-->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
<script src="js/main.js" type="text/javascript"></script>
</head>
<body style="background:#FFF !important;">
<a id="button"></a> <!-- THIS IS THE SCROLL TO TOP BUTTON -->
<!--NAVIGATION AND HEADER SECTION-->
<nav class="navbar about-navbar">
<a href="index.html" class="navbar-brand">
<img class="logo-desktop" src="icons/logo-white.svg">
<img class="logo-small" src="icons/logo-white.svg">
</a>
<ul class="nav justify-content-end">
<li class="nav-item about-nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item about-nav-item">
<a class="nav-link active" href="about.html">About</a>
</li>
<li class="nav-item about-nav-item">
<a class="nav-link" href="gallery.html">Gallery</a>
</li>
<li class="nav-item about-nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
<div class="push-button">
<div class="top-line"></div>
<div class="middle-line"></div>
<div class="middle-line under"></div>
<div class="bottom-line"></div>
</div>
</ul>
</nav>
<div class="container-fluid header-section about-header-section">
<div class="about-bg"></div>
<div class="inside-element">
<div class="col-12 col-lg-8 about-section-text">
<div class="main-heading-text-box about-main-box">
<h1 class="font-weight-light">We <span style="color: #16E1F5;">care</span> about people</h1>
<h5 class="lead">Give a helping hand for poor people</h5>
<a href="donate.html" class="about-donate-btn donate_button">
<p class="first">Donate</p>
<p class="second">Donate</p>
<img src="icons/right_white.svg" alt="">
</a>
</div>
</div>
<!-- THIS IS THE SCROLL DOWN BUTTON -->
<div class="scroll-down">Scroll</div>
<div class="vertical-divider"></div>
</div>
</div>
Below is the code in main.js:
$(document).ready(function ()
$(".scroll-down").click(function ()
return $("html, body").animate(
scrollTop: $("#about").offset().top - 64
, 800);
);
var $document = $(document),
$element1 = $('#button'),
changed = 'show';
if ($document.scrollTop() >= 500)
$element1.removeClass(changed);
else
$element1.addClass(changed);
$(window).scroll(function ()
var $document = $(document),
$element1 = $('#button'),
changed = 'show';
if ($document.scrollTop() >= 150)
$element1.removeClass(changed);
else
$element1.addClass(changed);
);
$('#button').click(function ()
$("html, body").animate( scrollTop: 0 , 100);
return false;
);
);
javascript jquery jquery-ui
edited Mar 25 at 16:54
Taplar
19.6k3 gold badges15 silver badges29 bronze badges
asked Mar 25 at 16:50
Viktor GavrilovicViktor Gavrilovic
236 bronze badges
I don't do much jQuery anymore. But this.scrollTolibrary was a nice addon for animating scroll. github.com/flesler/jquery.scrollTo
– mccambridge
Mar 25 at 17:17
I see some definition issues. For example,$("#about").offset().top, there is no element with idabout. Therefore notopis defined.
– Twisty
Mar 26 at 18:35
add a comment |
I am creating a scroll-down button and also I am creating a scroll-to-top button.
I have created both buttons but when I click on any of them they are not scrolling and I do not know why is that. I have tried everything and still is not working. I have even used a code which works perfectly on other websites that I have developed but still nothing..
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" name="viewport" />
<!--<link rel="shortcut icon" href="icons/favicon.ico" type="image/x-icon">
<link rel="icon" href="icons/favicon.ico" type="image/x-icon">-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link title="main_css" rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
</script-->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
<script src="js/main.js" type="text/javascript"></script>
</head>
<body style="background:#FFF !important;">
<a id="button"></a> <!-- THIS IS THE SCROLL TO TOP BUTTON -->
<!--NAVIGATION AND HEADER SECTION-->
<nav class="navbar about-navbar">
<a href="index.html" class="navbar-brand">
<img class="logo-desktop" src="icons/logo-white.svg">
<img class="logo-small" src="icons/logo-white.svg">
</a>
<ul class="nav justify-content-end">
<li class="nav-item about-nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item about-nav-item">
<a class="nav-link active" href="about.html">About</a>
</li>
<li class="nav-item about-nav-item">
<a class="nav-link" href="gallery.html">Gallery</a>
</li>
<li class="nav-item about-nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
<div class="push-button">
<div class="top-line"></div>
<div class="middle-line"></div>
<div class="middle-line under"></div>
<div class="bottom-line"></div>
</div>
</ul>
</nav>
<div class="container-fluid header-section about-header-section">
<div class="about-bg"></div>
<div class="inside-element">
<div class="col-12 col-lg-8 about-section-text">
<div class="main-heading-text-box about-main-box">
<h1 class="font-weight-light">We <span style="color: #16E1F5;">care</span> about people</h1>
<h5 class="lead">Give a helping hand for poor people</h5>
<a href="donate.html" class="about-donate-btn donate_button">
<p class="first">Donate</p>
<p class="second">Donate</p>
<img src="icons/right_white.svg" alt="">
</a>
</div>
</div>
<!-- THIS IS THE SCROLL DOWN BUTTON -->
<div class="scroll-down">Scroll</div>
<div class="vertical-divider"></div>
</div>
</div>
Below is the code in main.js:
$(document).ready(function ()
$(".scroll-down").click(function ()
return $("html, body").animate(
scrollTop: $("#about").offset().top - 64
, 800);
);
var $document = $(document),
$element1 = $('#button'),
changed = 'show';
if ($document.scrollTop() >= 500)
$element1.removeClass(changed);
else
$element1.addClass(changed);
$(window).scroll(function ()
var $document = $(document),
$element1 = $('#button'),
changed = 'show';
if ($document.scrollTop() >= 150)
$element1.removeClass(changed);
else
$element1.addClass(changed);
);
$('#button').click(function ()
$("html, body").animate( scrollTop: 0 , 100);
return false;
);
);
javascript jquery jquery-ui
edited Mar 25 at 16:54
Taplar
19.6k3 gold badges15 silver badges29 bronze badges
asked Mar 25 at 16:50
Viktor GavrilovicViktor Gavrilovic
236 bronze badges
I am creating a scroll-down button and also I am creating a scroll-to-top button.
I have created both buttons but when I click on any of them they are not scrolling and I do not know why is that. I have tried everything and still is not working. I have even used a code which works perfectly on other websites that I have developed but still nothing..
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" name="viewport" />
<!--<link rel="shortcut icon" href="icons/favicon.ico" type="image/x-icon">
<link rel="icon" href="icons/favicon.ico" type="image/x-icon">-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link title="main_css" rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
</script-->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
<script src="js/main.js" type="text/javascript"></script>
</head>
<body style="background:#FFF !important;">
<a id="button"></a> <!-- THIS IS THE SCROLL TO TOP BUTTON -->
<!--NAVIGATION AND HEADER SECTION-->
<nav class="navbar about-navbar">
<a href="index.html" class="navbar-brand">
<img class="logo-desktop" src="icons/logo-white.svg">
<img class="logo-small" src="icons/logo-white.svg">
</a>
<ul class="nav justify-content-end">
<li class="nav-item about-nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item about-nav-item">
<a class="nav-link active" href="about.html">About</a>
</li>
<li class="nav-item about-nav-item">
<a class="nav-link" href="gallery.html">Gallery</a>
</li>
<li class="nav-item about-nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
<div class="push-button">
<div class="top-line"></div>
<div class="middle-line"></div>
<div class="middle-line under"></div>
<div class="bottom-line"></div>
</div>
</ul>
</nav>
<div class="container-fluid header-section about-header-section">
<div class="about-bg"></div>
<div class="inside-element">
<div class="col-12 col-lg-8 about-section-text">
<div class="main-heading-text-box about-main-box">
<h1 class="font-weight-light">We <span style="color: #16E1F5;">care</span> about people</h1>
<h5 class="lead">Give a helping hand for poor people</h5>
<a href="donate.html" class="about-donate-btn donate_button">
<p class="first">Donate</p>
<p class="second">Donate</p>
<img src="icons/right_white.svg" alt="">
</a>
</div>
</div>
<!-- THIS IS THE SCROLL DOWN BUTTON -->
<div class="scroll-down">Scroll</div>
<div class="vertical-divider"></div>
</div>
</div>
Below is the code in main.js:
$(document).ready(function ()
$(".scroll-down").click(function ()
return $("html, body").animate(
scrollTop: $("#about").offset().top - 64
, 800);
);
var $document = $(document),
$element1 = $('#button'),
changed = 'show';
if ($document.scrollTop() >= 500)
$element1.removeClass(changed);
else
$element1.addClass(changed);
$(window).scroll(function ()
var $document = $(document),
$element1 = $('#button'),
changed = 'show';
if ($document.scrollTop() >= 150)
$element1.removeClass(changed);
else
$element1.addClass(changed);
);
$('#button').click(function ()
$("html, body").animate( scrollTop: 0 , 100);
return false;
);
);
javascript jquery jquery-ui
javascript jquery jquery-ui
edited Mar 25 at 16:54
Taplar
19.6k3 gold badges15 silver badges29 bronze badges
asked Mar 25 at 16:50
Viktor GavrilovicViktor Gavrilovic
236 bronze badges
edited Mar 25 at 16:54
Taplar
19.6k3 gold badges15 silver badges29 bronze badges
asked Mar 25 at 16:50
Viktor GavrilovicViktor Gavrilovic
236 bronze badges
edited Mar 25 at 16:54
Taplar
19.6k3 gold badges15 silver badges29 bronze badges
edited Mar 25 at 16:54
Taplar
19.6k3 gold badges15 silver badges29 bronze badges
edited Mar 25 at 16:54
Taplar
19.6k3 gold badges15 silver badges29 bronze badges
19.6k3 gold badges15 silver badges29 bronze badges
asked Mar 25 at 16:50
Viktor GavrilovicViktor Gavrilovic
236 bronze badges
asked Mar 25 at 16:50
Viktor GavrilovicViktor Gavrilovic
236 bronze badges
asked Mar 25 at 16:50
Viktor GavrilovicViktor Gavrilovic
236 bronze badges
236 bronze badges
I don't do much jQuery anymore. But this.scrollTolibrary was a nice addon for animating scroll. github.com/flesler/jquery.scrollTo
– mccambridge
Mar 25 at 17:17
I see some definition issues. For example,$("#about").offset().top, there is no element with idabout. Therefore notopis defined.
– Twisty
Mar 26 at 18:35
add a comment |
I don't do much jQuery anymore. But this.scrollTolibrary was a nice addon for animating scroll. github.com/flesler/jquery.scrollTo
– mccambridge
Mar 25 at 17:17
I see some definition issues. For example,$("#about").offset().top, there is no element with idabout. Therefore notopis defined.
– Twisty
Mar 26 at 18:35
I don't do much jQuery anymore. But this
.scrollTo library was a nice addon for animating scroll. github.com/flesler/jquery.scrollTo– mccambridge
Mar 25 at 17:17
I don't do much jQuery anymore. But this
.scrollTo library was a nice addon for animating scroll. github.com/flesler/jquery.scrollTo– mccambridge
Mar 25 at 17:17
I see some definition issues. For example,
$("#about").offset().top, there is no element with id about. Therefore no top is defined.– Twisty
Mar 26 at 18:35
I see some definition issues. For example,
$("#about").offset().top, there is no element with id about. Therefore no top is defined.– Twisty
Mar 26 at 18:35
add a comment |
2 Answers
2
active
oldest
votes
I'm not sure if you can animate both html and body? Why don't you give a div a solid ID and animate that, should work for you.
answered Mar 25 at 17:05
Al KatawaziAl Katawazi
3,9406 gold badges21 silver badges35 bronze badges
add a comment |
I suspect you are trying to follow: Is it possible to animate scrollTop with jQuery?
Please see: https://jsfiddle.net/Twisty/e3x42Lnm/
When you use animate, you want to set a Pixel value to scroll to:
$('#button').click(function(e)
e.preventDefault();
log("Button Click");
$("html, body").animate(
scrollTop: "0px"
, 500, function()
log("Scroll Animation Complete")
);
);
There was a lot of elements that appeared to be missing. Hence my Fiddle is more of an example and would need to be adapted to your specific code. In the future, please provide a Minimal, Complete, and Verifiable example.
Hope that helps.
answered Mar 26 at 18:54
TwistyTwisty
15.2k1 gold badge16 silver badges36 bronze badges
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55342754%2fwhy-is-my-jquery-animate-function-not-working%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
I'm not sure if you can animate both html and body? Why don't you give a div a solid ID and animate that, should work for you.
answered Mar 25 at 17:05
Al KatawaziAl Katawazi
3,9406 gold badges21 silver badges35 bronze badges
add a comment |
I'm not sure if you can animate both html and body? Why don't you give a div a solid ID and animate that, should work for you.
answered Mar 25 at 17:05
Al KatawaziAl Katawazi
3,9406 gold badges21 silver badges35 bronze badges
add a comment |
I'm not sure if you can animate both html and body? Why don't you give a div a solid ID and animate that, should work for you.
answered Mar 25 at 17:05
Al KatawaziAl Katawazi
3,9406 gold badges21 silver badges35 bronze badges
I'm not sure if you can animate both html and body? Why don't you give a div a solid ID and animate that, should work for you.
answered Mar 25 at 17:05
Al KatawaziAl Katawazi
3,9406 gold badges21 silver badges35 bronze badges
answered Mar 25 at 17:05
Al KatawaziAl Katawazi
3,9406 gold badges21 silver badges35 bronze badges
answered Mar 25 at 17:05
Al KatawaziAl Katawazi
3,9406 gold badges21 silver badges35 bronze badges
answered Mar 25 at 17:05
Al KatawaziAl Katawazi
3,9406 gold badges21 silver badges35 bronze badges
3,9406 gold badges21 silver badges35 bronze badges
add a comment |
add a comment |
I suspect you are trying to follow: Is it possible to animate scrollTop with jQuery?
Please see: https://jsfiddle.net/Twisty/e3x42Lnm/
When you use animate, you want to set a Pixel value to scroll to:
$('#button').click(function(e)
e.preventDefault();
log("Button Click");
$("html, body").animate(
scrollTop: "0px"
, 500, function()
log("Scroll Animation Complete")
);
);
There was a lot of elements that appeared to be missing. Hence my Fiddle is more of an example and would need to be adapted to your specific code. In the future, please provide a Minimal, Complete, and Verifiable example.
Hope that helps.
answered Mar 26 at 18:54
TwistyTwisty
15.2k1 gold badge16 silver badges36 bronze badges
add a comment |
I suspect you are trying to follow: Is it possible to animate scrollTop with jQuery?
Please see: https://jsfiddle.net/Twisty/e3x42Lnm/
When you use animate, you want to set a Pixel value to scroll to:
$('#button').click(function(e)
e.preventDefault();
log("Button Click");
$("html, body").animate(
scrollTop: "0px"
, 500, function()
log("Scroll Animation Complete")
);
);
There was a lot of elements that appeared to be missing. Hence my Fiddle is more of an example and would need to be adapted to your specific code. In the future, please provide a Minimal, Complete, and Verifiable example.
Hope that helps.
answered Mar 26 at 18:54
TwistyTwisty
15.2k1 gold badge16 silver badges36 bronze badges
add a comment |
I suspect you are trying to follow: Is it possible to animate scrollTop with jQuery?
Please see: https://jsfiddle.net/Twisty/e3x42Lnm/
When you use animate, you want to set a Pixel value to scroll to:
$('#button').click(function(e)
e.preventDefault();
log("Button Click");
$("html, body").animate(
scrollTop: "0px"
, 500, function()
log("Scroll Animation Complete")
);
);
There was a lot of elements that appeared to be missing. Hence my Fiddle is more of an example and would need to be adapted to your specific code. In the future, please provide a Minimal, Complete, and Verifiable example.
Hope that helps.
answered Mar 26 at 18:54
TwistyTwisty
15.2k1 gold badge16 silver badges36 bronze badges
I suspect you are trying to follow: Is it possible to animate scrollTop with jQuery?
Please see: https://jsfiddle.net/Twisty/e3x42Lnm/
When you use animate, you want to set a Pixel value to scroll to:
$('#button').click(function(e)
e.preventDefault();
log("Button Click");
$("html, body").animate(
scrollTop: "0px"
, 500, function()
log("Scroll Animation Complete")
);
);
There was a lot of elements that appeared to be missing. Hence my Fiddle is more of an example and would need to be adapted to your specific code. In the future, please provide a Minimal, Complete, and Verifiable example.
Hope that helps.
answered Mar 26 at 18:54
TwistyTwisty
15.2k1 gold badge16 silver badges36 bronze badges
answered Mar 26 at 18:54
TwistyTwisty
15.2k1 gold badge16 silver badges36 bronze badges
answered Mar 26 at 18:54
TwistyTwisty
15.2k1 gold badge16 silver badges36 bronze badges
answered Mar 26 at 18:54
TwistyTwisty
15.2k1 gold badge16 silver badges36 bronze badges
15.2k1 gold badge16 silver badges36 bronze badges
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55342754%2fwhy-is-my-jquery-animate-function-not-working%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I don't do much jQuery anymore. But this
.scrollTolibrary was a nice addon for animating scroll. github.com/flesler/jquery.scrollTo– mccambridge
Mar 25 at 17:17
I see some definition issues. For example,
$("#about").offset().top, there is no element with idabout. Therefore notopis defined.– Twisty
Mar 26 at 18:35