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?













-1















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









share|improve this question
























  • 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
















-1















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









share|improve this question
























  • 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














-1












-1








-1








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









share|improve this question
















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






share|improve this question















share|improve this question













share|improve this question




share|improve this question








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




236 bronze badges












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











2 Answers
2






active

oldest

votes


















0














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.






share|improve this answer






























    0














    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.






    share|improve this answer

























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



      );













      draft saved

      draft discarded


















      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









      0














      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.






      share|improve this answer



























        0














        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.






        share|improve this answer

























          0












          0








          0







          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.






          share|improve this answer













          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.







          share|improve this answer












          share|improve this answer



          share|improve this answer










          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





















              0














              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.






              share|improve this answer



























                0














                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.






                share|improve this answer

























                  0












                  0








                  0







                  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.






                  share|improve this answer













                  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.







                  share|improve this answer












                  share|improve this answer



                  share|improve this answer










                  answered Mar 26 at 18:54









                  TwistyTwisty

                  15.2k1 gold badge16 silver badges36 bronze badges




                  15.2k1 gold badge16 silver badges36 bronze badges



























                      draft saved

                      draft discarded
















































                      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.




                      draft saved


                      draft discarded














                      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





















































                      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







                      Popular posts from this blog

                      How to preserve electronics (computers, tablets and phones) for hundreds of years Announcing the arrival of Valued Associate #679: Cesar Manara Planned maintenance scheduled April 23, 2019 at 23:30 UTC (7:30pm US/Eastern) The network's official Twitter account is up and running again. What content…How might modern humans leave a message for 50,000 years?How would an aquatic race develop computers?How do we make computers care for human life?Keeping supplies for 1000 yearsWhat will cell phones become in 100 years?What body armor protects against a laser?Could a society attain 1800s technology if limited to using copper and bronze?Electricity power (magic) and electronicsScavenging metal resources in post-apocalypse after 100 yearsWhy would precursors create devices that can survive and still work after hundreds of years?

                      155 수학 과학 기타 둘러보기 메뉴eh추가해eh문서를 완성해

                      Convert JSON to MapSimplest way to convert a string representing JSON array into Java array List of key value pairsHow to take String JSON values into HashMapConvert a JSON String to a HashMapCreating BSON object from JSON stringJSONObject - How to get a value ?Better Map ConstructorReading JSON from Url javaUpdate columns if input values are not null otherwise ignore and keep the existing values of column in databaseHow to store object represented as Json string into Couchbase Lite?Go JSON into MapHow do I efficiently iterate over each entry in a Java Map?Sort a Map<Key, Value> by valuesHow to round a number to n decimal places in JavaCan comments be used in JSON?How do I read / convert an InputStream into a String in Java?How can I pretty-print JSON in a shell script?What is the correct JSON content type?How can I deserialize JSON to a simple Dictionary<string,string> in ASP.NET?Why does Google prepend while(1); to their JSON responses?Parse JSON in JavaScript?