How Can I Add Text In My Scroll To Top Button Which Already Has An Icon In It

I'm totally new to this field so please help me out. I've tried almost everything but nothing seems to be working. Actually, I want to add some text in my scroll to top button, whi

Solution 1:

Try following.

$("body").append($("<a />")
    .addClass("scroll-to-top")

        .attr({
            "href": "#",
            "id": "scrollToTop"
                        })
    .append(
        $("<i>Scroll</i>")
        .addClass("icon icon-chevron-up icon-white")
));

Solution 2:

Try this

$(document).ready(function () {
				
				$(window).scroll(function () {
					if ($(this).scrollTop() > 100) {
						$('.scrollup').fadeIn();
						} else {
						$('.scrollup').fadeOut();
					}
				});
				
				$('.scrollup').click(function () {
					$("html, body").animate({
						scrollTop: 0
					}, 600);
					returnfalse;
				});
				
			});

/* CSS used here will be applied after bootstrap.css */.scrollup {
	width: 250px;
	height: 40px;
	position: fixed;
	bottom: 10px;
	right: 10px;
	display: block;
	text-align:center;
	vertical-align:middle;
	background-color: #6BAFBD;
	border:1px solid #6BAFBD;
	border-radius:10px;
	color:#fff;
}
.scrollup.middle{
	margin:12px;
}
.scrollup:hover{
	background-color: #BD8D6B;
	border:1px solid #BD8D6B;
	color:#000;
}

<linkhref="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css"rel="stylesheet"><ahref="#"class="scrollup">Back To Top<iclass = "fa fa-chevron-up middle"></i></a>

Demo Here.