How TO Scroll Back To Top Button in wordpress?


Scroll Back To Top Button in wordpress

DOWNLOAD JS FILE from https://jquery.com/download/ =       jquery.min.js (jquery-3.4.1.js)

<html>
<head>
<style>

/****************************************
  IMPORTANT
*****************************************/

.scrollTop {
  position: fixed;
  right: 10%;
  bottom: 10px;
  background-color: #BE3F48;
  padding: 20px;
  opacity: 0;
  transition: all 0.4s ease-in-out 0s;
}

.scrollTop a {
  font-size: 18px;
  color: #fff;
}

</style>
<script src=”<?php echo plugin_dir_url(__FILE__);?>/js/jquery.min.js“></script>

<script>

// BY KAREN GRIGORYAN

$(document).ready(function() {
  /******************************
      BOTTOM SCROLL TOP BUTTON
   ******************************/

  // declare variable
  var scrollTop = $(“.scrollTop”);

  $(window).scroll(function() {
    // declare variable
    var topPos = $(this).scrollTop();

    // if user scrolls down – show scroll to top button
    if (topPos > 300) {
      $(scrollTop).css(“opacity”, “1”);

    } else {
      $(scrollTop).css(“opacity”, “0”);
    }

  }); // scroll END

  //Click event to scroll to top
  $(scrollTop).click(function() {
    $(‘html, body’).animate({
      scrollTop: 0
    }, 800);
    return false;

  }); // click() scroll top EMD

  /*************************************
    LEFT MENU SMOOTH SCROLL ANIMATION
   *************************************/
  // declare variable
  var h1 = $(“#h1”).position();
  var h2 = $(“#h2”).position();
  var h3 = $(“#h3”).position();

  $(‘.link1’).click(function() {
    $(‘html, body’).animate({
      scrollTop: h1.top
    }, 500);
    return false;

  }); // left menu link2 click() scroll END

  $(‘.link2’).click(function() {
    $(‘html, body’).animate({
      scrollTop: h2.top
    }, 500);
    return false;

  }); // left menu link2 click() scroll END

  $(‘.link3’).click(function() {
    $(‘html, body’).animate({
      scrollTop: h3.top
    }, 500);
    return false;

  }); // left menu link3 click() scroll END

}); // ready() END

</script>
</head>
<body>

  <div class=”right”>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
    <div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
  </div>

  <div id=”stop” class=”scrollTop”>
    <span><a href=””>Top</a></span>
  </div>

<!– main–>

</body>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *