Twitter Bootstrap Question posted in

Back-to-top is not working anymore in Bootstrap 4-Twitter bootstrap

I am trying to implement a back-to-top button with js in bootstrap 4 using the fontawesome icon-set. A week ago it worked perfectly, but ever since I changed a few other things on the site it stopped working. It is probably a simple error, but I am new to js and don’t know how to fix this…
This is my code:

$(document).ready(function() {
        $(window).scroll(function() {
          if ($(this).scrollTop() > 50) {
            $('#back-to-top').fadeIn();
          } else {
            $('#back-to-top').fadeOut();
          }
        });
        // scroll body to 0px on click
        $('#back-to-top').click(function() {
          $('body,html').animate({
            scrollTop: 0
          }, 400);
          return false;
        });
      });
.back-to-top {
    position: fixed;
    bottom: 25px;
    right: 25px;
    display: none;
}
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="height:100rem;">test</div>
<a id="back-to-top" href="#" class="mr-m2b btn btn-primary btn-lg back-to-top" role="button">TOP<i class="fas fa-chevron-up"></i></a>

it used to work perfectly, yet I broke it somehow and I am not sure how…
The javascript seems to be the problem as it does pretty much nothing, the question is why? And why did it use to work before, but doesn’t now, when I did not touch the function at all?!

edit:
I recently deleted a custom scrollbar

body::-webkit-scrollbar {
  width: 1em;
}

body::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

body::-webkit-scrollbar-thumb {
  background-color: #A1394F;
  outline: 1px solid slategrey;
}

but copying that back in doesn’t help either. The exact same, copy-pasted js code works in the code snippet here, but not on my html page… What am I missing?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I managed to fix it by copying the js script and pasting it again at the end of the body section. The problem was caused by a wrong import order and not a code or version error. Jquery 3.3, 3.4 and 3.5 all work fine if the import order is correct. It feels dumb to say it out loud, but a script that requires jquery can obviously not work if it is added before jquery is imported ... So my scripts now look like this:

    <script src="{% static 'jquery-3.5.1.min.js' %}"></script>
<script src="{% static 'popper1.16.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $(window).scroll(function() {
      if ($(this).scrollTop() > 50) {
        $('#back-to-top').fadeIn();
      } else {
        $('#back-to-top').fadeOut();
      }
    });
    // scroll body to 0px on click
    $('#back-to-top').click(function() {
      $('body,html').animate({
        scrollTop: 0
      }, 400);
      return false;
    });
  });
</script>

  2. 0

    its work in example, if your code is not working in your project try this.

    // body only instead “body, html” or create id and put in body <body id="top">

    then edit js into document.querySelector('#top').scrollIntoView({ behavior: 'smooth' });

    or try this super smooth http://iamdustan.com/smoothscroll/

    JS

    // Go to Top
$(document).ready(function(){

    //Check to see if the window is top if not then display button
    $(window).scroll(function(){
        if ($(this).scrollTop() > 800) {
            $('#back-to-top').fadeIn();
        } else {
            $('#back-to-top').fadeOut();
        }
    });

      // scroll to top
      document.querySelector('.back-to-top').addEventListener('click', function(e) {
        e.preventDefault();
        document.querySelector('body').scrollIntoView({ behavior: 'smooth' });
      });

});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search