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, which has already been made and working perfectly and it has an icon in it. But I want to add some text with that icon. Here's a link what I want to do!

Following is the code I have in js file:

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

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

where should I have to add the text, either in the above code file or into the code of my page?

Help of any kind would be appreciated.

Thanks in advance.

回答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")
));

回答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);
					return false;
				});
				
			});

/* 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;
}

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

Demo Here.

来源：https://stackoverflow.com/questions/29231811/how-can-i-add-text-in-my-scroll-to-top-button-which-already-has-an-icon-in-it

标签

javascript

jquery

html

scrolltop