Answers for "jquery scroll down hamburger menu button"

jquery scroll down hamburger menu button

<style>
body {
    height: 2000px;
    background-color: #607D8B;
    color: #fff;
}
.backTop-btn {
    position: fixed;
    right: 20px;
    bottom: 20px;
    text-align: center;
    color: #795548;
    text-decoration: none;
    background-color: #fff;
    padding: 10px 20px;
    border-radius: 40px;
    font-size: 18px;
    border-bottom-left-radius: 0px;
    border-top-right-radius: 0px;
    border: 3px solid #FFC107;
    box-shadow: 0px 0px 8px 2px #5a5a5a;
    display: none;
}
</style>

Posted by: Guest on October-17-2021

jquery scroll down hamburger menu button

<script>
$(document).ready(function(){
  // Show and hide button after scroll down and up
  $(window).on("scroll", function () {
     if ($(this).scrollTop() > 200) {
        $('.backTop-btn').fadeIn('slow');
     } else {
        $('.backTop-btn').fadeOut('slow');
     }
  });
  // Clickable button js
  $("a[href='#backTop']").click(function() {
    $("html, body").animate({ scrollTop: 0 }, 500);
  });
});
</script>

Posted by: Guest on October-17-2021

jquery scroll down hamburger menu button

<!DOCTYPE html>
<html lang="en">
<head>
  <title>How to Create a jQuery back to top button with smooth scroll</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>

<h1>Hello, click on “back to top” button and come on top!!!</h1>

<a href="#backTop" class="backTop-btn"><i class="fa fa-arrow-up" aria-hidden="true"></i><br>Back to Top</a>

</body>
</html>

Posted by: Guest on October-17-2021