Create Scroll Back to Top Button using jQuery and CSS

Create Scroll Back to Top Button using jQuery and CSS

Welcome on Pakainfo.com – Examples ,The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Create Scroll Back to Top Button using jQuery and CSS

In this post we will show you Best way to implement Creating a smooth scroll “Back to Top” button using jQuery, hear for How to Create Floating Back to Top Button with jQuery with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Read Also:  jQuery Back to top

HTML markup Part(index.html)

<div id="content">Clcik here to Scroll ↓</div>
<a href="#" id="live-back-top" title="Back to top">↑</a>

JavaScript Part (index.js)

if ($('#live-back-top').length) {
    var scrollTrigger = 100, // px
        backToTop = function () {
            var scrollTop = $(window).scrollTop();
            if (scrollTop > scrollTrigger) {
                $('#live-back-top').addClass('show');
            } else {
                $('#live-back-top').removeClass('show');
            }
        };
    backToTop();
    $(window).on('scroll', function () {
        backToTop();
    });
    $('#live-back-top').on('click', function (e) {
        e.preventDefault();
        $('html,body').animate({
            scrollTop: 0
        }, 700);
    });
}

Style Part (style.css)

#live-back-top {
    position: fixed;
    bottom: 40px;
    right: 40px;
    z-index: 9999;
    width: 32px;
    height: 32px;
    text-align: center;
    line-height: 30px;
    background: #f5f5f5;
    color: #444;
    cursor: pointer;
    border: 0;
    border-radius: 2px;
    text-decoration: none;
    transition: opacity 0.2s ease-out;
    opacity: 0;
}
#live-back-top:hover {
    background: #e9ebec;
}
#live-back-top.show {
    opacity: 1;
}
#content {
    height: 2000px;
}

Example

Read Also:  Reset input fields using onchange event in JQuery

I hope you have Got Customizable Back To Top Button with jQuery – backTop And how it works.I would Like to have FeadBack From My Blog(Pakainfo.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(Pakainfo.com) Are Most Always Welcome.


Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  sticky Scroll Back to Top Button using jQuery and CSS
  2. Read Also:  Image Resize Crop Thumbnail Watermark PHP Script
  3. Read Also:  C# .NET Delegates and Events Simplified
  4. Read Also:  PHP crud Mysqli Select Insert Update and Delete query
  5. Read Also:  Simple Scroll Back to Top Plugin Examples with demo
  6. Read Also:  PHP Multidimensional Array Check if specific array key
  7. Read Also:  jQuery An Animated Scroll To Top Button
  8. Read Also:  Back to Top Button using jQuery and CSS - Scroll to Top Example
  9. Read Also:  Laravel Create Custom Helper Class Example
  10. Read Also:  NodeJS With MySQL Database Connection Tutorial Example