sticky Scroll Back to Top Button using jQuery and CSS

Today, We want to share with you sticky Scroll Back to Top Button using jQuery and CSS.In this post we will show you scroll to top button bootstrap 4, hear for How to create back to top link using CSS and JQuery? we will give you demo and example for implement.In this post, we will learn about Simple Scroll Back to Top of the Page Button JavaScript with an example.

sticky Scroll Back to Top Button using jQuery and CSS

There are the Following The simple About How to add a sticky back-to-top button to your website Full Information With Example and source code.

As I will cover this Post with live Working example to develop back to top button javascript smooth scrolling, so the floating back to top button html is used for this example is following below.

HTML Part

index.html

I will create HTML file.Just see bellow HTML with jQuery and css example html file and run in your local too.

Another must read:  Simple Jquery Scroll To Top Example

List of all Google Adsense, VueJS, AngularJS, PHP, Laravel Examples.

<div id="main-menubar">
<div id="arrow-up"></div>
</div>

CSS Part

#main-menubar{
position:fixed;
right:3%;
bottom:3%;
text-align:center;
border-radius:100%;
background:#010211;
width:30px;
height:30px;
padding:6px;
font-size:1.5rem;
opacity:.8;
z-index:99999;
cursor:pointer;
display:none;
}

#main-menubar:hover{
opacity:.9;
}

#arrow-up{
width:0;
height:0;
border-left:12px solid transparent;
border-right:12px solid transparent;
border-bottom:12px solid #fff;
font-size:0;
line-height:0;
margin:0 auto;
display:inline-block;
}

jQuery/JavaScript Part

we will simply include jquery CDN file. as well as We added some custom jQuery or pure JavaScript Source code.

use the functions based on above Example.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(window).scroll(function () {
        if ($(this).scrollTop()) {
            $('#main-menubar:hidden').stop(true, true).fadeIn();
        } else {
            $('#main-menubar').stop(true, true).fadeOut();
        }
});

$("#main-menubar").click(function () {
        $('html, body').animate({ scrollTop: $('html').offset().top }, 1000);
});
</script>

Web Programming Tutorials Example with Demo

Read :

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about back to top button bootstrap(simple sticky Button Examples).
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Leave a Reply

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