如何：在顶部按钮中添加文本

Question

thanks for visiting. 感谢造访。 I need to know how can I add in my back-to-top button a "text" saying: "Back to top" or similar. 我需要知道如何在我的返回页首按钮中添加一个“文本”字样：“返回页首”或类似内容。

 jQuery(document).ready(function($){ // browser window scroll (in pixels) after which the "back to top" link is shown var offset = 300, //browser window scroll (in pixels) after which the "back to top" link opacity is reduced offset_opacity = 1200, //duration of the top scrolling animation (in ms) scroll_top_duration = 700, //grab the "back to top" link $back_to_top = $('.cd-top'); //hide or show the "back to top" link $(window).scroll(function(){ ( $(this).scrollTop() > offset ) ? $back_to_top.addClass('cd-is-visible') : $back_to_top.removeClass('cd-is-visible cd-fade-out'); if( $(this).scrollTop() > offset_opacity ) { $back_to_top.addClass('cd-fade-out'); } }); //smooth scroll to top $back_to_top.on('click', function(event){ event.preventDefault(); $('body,html').animate({ scrollTop: 0 , }, scroll_top_duration ); }); });

 body { width:100%; height:1200px; background-color:#242424; margin:0; padding:0; } body > div { width:100%; height:75px; background-color:#393939; text-align:center; position:fixed; } .text { font-size:40px; color:white; line-height:75px; } .cd-container { width: 90%; max-width: 768px; margin: 2em auto; } .cd-container::after { content: ''; display: table; clear: both; } .cd-top { display: inline-block; height: 40px; width: 80px; position: fixed; bottom: 40px; right: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); overflow: hidden; text-indent: 100%; white-space: nowrap; background: rgba(231, 142, 46, 0.8) url(https://codyhouse.co/demo/back-to-top/img/cd-top-arrow.svg) no-repeat center 50%; visibility: hidden; opacity: 0; -webkit-transition: opacity .3s 0s, visibility 0s .3s; -moz-transition: opacity .3s 0s, visibility 0s .3s; transition: opacity .3s 0s, visibility 0s .3s; } .cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover { -webkit-transition: opacity .3s 0s, visibility 0s 0s; -moz-transition: opacity .3s 0s, visibility 0s 0s; transition: opacity .3s 0s, visibility 0s 0s; } .cd-top.cd-is-visible { visibility: visible; opacity: 1; } .cd-top.cd-fade-out { opacity: .5; } .no-touch .cd-top:hover { color:#1769ff; opacity: 1; } @media only screen and (min-width: 768px) { .cd-top { right: 20px; bottom: 20px; } } } @media only screen and (min-width: 1024px) { .cd-top { height: 60px; width: 60px; right: 30px; bottom: 30px; } }

 <!doctype html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> </head> <body> <div> <span class="text"> Scrolldown.</span> </div> <a href="#0" class="cd-top">BackToToP</a> <!-- Im using Back to Top from here: https://codyhouse.co/demo/back-to-top/index.html --> </body> </html>

If you see, I add "BackToTop" text but nothing happend. 如果看到的话，我添加了“ BackToTop”文本，但没有任何反应。

I tried using different ways but I dont know how. 我尝试使用不同的方式，但我不知道如何。 Thanks. 谢谢。

Answer 1

You must remove text-indent: 100% . 您必须删除text-indent: 100% 。 That will push the text back to it's original position. 这样会将文字推回原来的位置。

EDIT: 编辑：

If you then want the text to be next to the arrow you can do something like this: 然后，如果您希望文本位于箭头旁边，则可以执行以下操作：

.cd-top {
   text-indent: 0;
   width: auto;
   line-height: 40px;
   text-decoration: none;
   font-family: Arial;
   color: #FFF;
   padding: 0 50px 0 20px;
   background-position: right 20px center;
}

Combined with your code: 结合您的代码：

.cd-top {
   display: inline-block;
   height: 40px;
   line-height: 40px;
   width: auto;
   position: fixed;
   bottom: 40px;
   right: 10px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
   overflow: hidden;
   font-family: Arial;
   text-indent: 0;
   text-decoration: none;
   color: #FFF;
   white-space: nowrap;
   background: rgba(231, 142, 46, 0.8) url(https://codyhouse.co/demo/back-to-top/img/cd-top-arrow.svg) no-repeat right 20px center;
   padding: 0 50px 0 20px;
   -webkit-transition: opacity .3s 0s, visibility 0s .3s;
   -moz-transition: opacity .3s 0s, visibility 0s .3s;
   transition: opacity .3s 0s, visibility 0s .3s;
}

Answer 2

The css property 'text-indent' is the one giving you the issue. css属性“ text-indent”是给您问题的属性。 Remove it and you will see the text. 删除它，您将看到文本。 A good way to debug this kind of stuff is using developer tools and then inspecting the element. 调试此类内容的一种好方法是使用开发人员工具，然后检查元素。

如何：在顶部按钮中添加文本

问题描述

2 个解决方案

解决方案1
0 已采纳 2017-01-12 15:32:14

解决方案2
0 2017-01-12 15:34:52

如何：在顶部按钮中添加文本

问题描述

2 个解决方案

解决方案1 0 已采纳 2017-01-12 15:32:14

解决方案2 0 2017-01-12 15:34:52

解决方案1
0 已采纳 2017-01-12 15:32:14

解决方案2
0 2017-01-12 15:34:52