Saturday, May 13, 2023

How to create a scroll to the top in Blogspot

How to create a scroll to the top in Blogspot
  1. Log in to your Blogspot account and navigate to the "Theme" section of your blog's dashboard.
  2. Click on "Edit HTML" to access the HTML editor for your blog's theme.
  3. Scroll down to the bottom of the HTML code and add the following code just before the </body> tag:
                
    <a href="#" id="scroll-to-top"><i class="fa fa-arrow-up"></i></a>
    <style>
    #scroll-to-top {
      position: fixed;
      bottom: 20px;
      right: 20px;
      z-index: 9999;
      display: none;
    }
    
    #scroll-to-top i {
      font-size: 24px;
    }
    </style>
    <script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js”></script>
    <script>
    $(document).ready(function(){
        $(window).scroll(function () {
            if ($(this).scrollTop() > 50) {
                $('#scroll-to-top').fadeIn();
            } else {
                $('#scroll-to-top').fadeOut();
            }
        });
        $('#scroll-to-top').click(function () {
            $("html, body").animate({
                scrollTop: 0
            }, 600);
            return false;
        });
    });
    </script>
    
                
            
  4. Save the changes to your theme's HTML code and preview your blog to see the "scroll to top" button.
  5. Customize the button's appearance and behavior as needed by modifying the CSS and JavaScript code. You can change the position, size, and color of the button by modifying the CSS, and you can adjust the scroll speed and animation by modifying the JavaScript.