Question

感谢您的光临。我需要知道如何在后面的按钮中添加一个“文本”说： “回到顶部”或类似。

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>

如果你看到，我添加了“BackToTop”文本，但没有任何事情发生。

我尝试过不同的方式，但我不知道如何。感谢。

Answer 1

您必须删除text-indent: 100%。这将把文本推回原来的位置。

修改

如果您希望文本位于箭头旁边，您可以执行以下操作：

.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; }

结合您的代码：

.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

css属性＆＃39; text-indent＆＃39;是给你问题的人。删除它，你会看到文字。调试这类东西的好方法是使用开发人员工具，然后检查元素。

方法：在返回顶部按钮

2 个答案: