Back To Top Button In JQuery

Enhance your website’s person revel in with a totally easy arrow which fades in when site visitors begin scrolling the page. The page smoothly scrolls back to the top while the button is clicked.

HTML Code

Add the hyperlink underneath anywhere in your HTML supplyas an example inside the footer earlier than the remaining tag. For WordPress use the footer.personal home page or some other template record that’s displayed on all pages. The hyperlink has a completely unique identifier, a tooltip title and incorporates a special arrow individual (➤), so we don’t should use a photo to show the arrow.

<a id="back2Top" title="Back to top" href="#">&#10148;</a>

CSS Code

Include the stylesheet and modify it in case your internet site’s layout requires that. Set the scalecolorsposition, hover impact of the arrow. The HTML arrow character we used changed into at the beginning pointing rightwards and this CSS code are rotating it counterclockwise to make it factor upwards.

 

#back2Top {
    width: 40px;
    line-height: 40px;
    overflow: hidden;
    z-index: 999;
    display: none;
    cursor: pointer;
    -moz-transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
    position: fixed;
    bottom: 50px;
    right: 0;
    background-color: #DDD;
    color: #555;
    text-align: center;
    font-size: 30px;
    text-decoration: none;
}
#back2Top:hover {
    background-color: #DDF;
    color: #000;
}

JavaScript Code

Add this JavaScript code to your website theme and ensure jQuery is used.
The script assessments the peak position on every page scroll and fades in the widget if it has reached the 100px limit whilst any other event listener detects the button clicks and smoothly scrolls again to the pinnacle of the page.

/*Scroll to top when arrow up clicked BEGIN*/
$(window).scroll(function() {
    var height = $(window).scrollTop();
    if (height > 100) {
        $('#back2Top').fadeIn();
    } else {
        $('#back2Top').fadeOut();
    }
});
$(document).ready(function() {
    $("#back2Top").click(function(event) {
        event.preventDefault();
        $("html, body").animate({ scrollTop: 0 }, "slow");
        return false;
    });

});
 /*Scroll to top when arrow up clicked END*/

 

Please follow and like us:



Leave a Comment

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