如何：在頂部按鈕中添加文本
[英]How: Add text in back-to-top button
問題描述
感謝造訪。 我需要知道如何在我的返回頁首按鈕中添加一個“文本”字樣：“返回頁首”或類似內容。
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>
我嘗試使用不同的方式，但我不知道如何。 謝謝。
2 個解決方案
解決方案1
0 已采納 2017-01-12 15:32:14
您必須刪除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;
}
解決方案2
0 2017-01-12 15:34:52
css屬性“ text-indent”是給您問題的屬性。 刪除它，您將看到文本。 調試此類內容的一種好方法是使用開發人員工具，然后檢查元素。
javascript 僅在博客頁面上的返回頂部按鈕上不起作用
[英]javascript is not working on the back-to-top button on the blog page only
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.