scrollTop not working as expected

Question

I want to scroll page after click button to some id. Every plugin I've tried not work:

Js Code Snippet

$(document).ready(function() {
  $("#province-toggle-wrapper").click(function() {
    alert("Some alert"); //<--- alert triggers
    $('html, body').animate({
      scrollTop: $("#profile-filter").offset().top
    }, 2000);
  });

  /*$("#province-toggle-wrapper").click(function() {
      alert("Some alert");  //<--- alert triggers
         $('body').scrollTo('#profile-filter');
     });*/
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://raw.githubusercontent.com/flesler/jquery.scrollTo/master/jquery.scrollTo.min.js"></script>
<div id="profile-filter" class="container-fluid">
  ABC
  <div id="province-toggle-wrapper">
    DEF
  </div>
</div>

form jQuery.scrollTo() plugin - top 2 methods from this solutions. What do I wrong?

you can just append to the url your id like url.com#myid and it will scroll there. — user5014677, Aug 10 '17 at 09:53
this isn't solution of this problem, and this is not animate — Barburka, Aug 10 '17 at 10:04

score 1 · Answer 1 · answered Aug 10 '17 at 10:09

$("#profile-filter").click(function() {
    $('html, body').animate({
        scrollTop: $("#container2").offset().top
    }, 4000);
    return false;
});

$("#province-toggle-wrapper").click(function() {
    $('html, body').animate({
        scrollTop: $("#container1").offset().top
    }, 4000);
     return false;
});

#container1{
    height:600px;
    width:100%;
    background:#879655;
}

#container2{
    height:600px;
    width:100%;
    background:#906354;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="container1">
    <a href="" id="profile-filter">Go to 2nd Container</a>
</div>

<div id="container2">
    <a href="" id="province-toggle-wrapper">Go to top</a>
</div>

Kindly check this snippet. I just include jquery library file, no other plugins.

Kind;y accept it as answer if it helped you. Thanks – Aug 10 '17 at 10:16 — , Aug 10 '17 at 10:16

score 1 · Accepted Answer · answered Aug 10 '17 at 10:12

1

You problem is the use of jQuery slim version.

The "slim" versions do not include several functions like animations and ajax.
The missing functions are listed here.

answered Aug 10 '17 at 10:12

Louys Patrice Bessette

27,837
5
32
57

score 1 · Answer 3 · answered Aug 10 '17 at 10:16

Here you go with a solution https://jsfiddle.net/Lh5mcLn7/

$(document).ready(function() {
  $("#province-toggle-wrapper").click(function() {
    $('html, body').animate({
      scrollTop: $("#profile-filter").offset().top
    }, 2000);
  });
});

#province-toggle-wrapper{
  height: 1000px;
  background: rgba(0,0,0,0.5);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="profile-filter" class="container-fluid">
  ABC
  <div id="province-toggle-wrapper">
    DEF
  </div>
</div>

Remove all the library, just keep jQuery (jquery.min.js).

score 0 · Answer 4 · edited Aug 10 '17 at 10:01

0

You are missing the document ready for jquery. Try to put your code between:

$(document).ready(function(){
  //Your code here
    });

And here you have a good explanation of using scrollto: w3Schools

edited Aug 10 '17 at 10:01

Rory McCrossan

306,214
37
269
303

answered Aug 10 '17 at 09:58

elpeyotl

372
1
2
12

1

Please don't use W3Schools. The information they provide is often outdate and sometimes event just plain wrong. jQuery learning centre is the authoritative resource for this. – Rory McCrossan Aug 10 '17 at 10:01
don't help, and if i have to add document.ready(), why alert triggers? – Barburka Aug 10 '17 at 10:01

scrollTop not working as expected

4 Answers4