Как: Добавить текст в верхнюю кнопку

спасибо за посещение. Мне нужно знать, как я могу добавить в свою кнопку «сверху вниз» «текст»: «В начало» или подобное.Как: Добавить текст в верхнюю кнопку

jQuery(document).ready(function($){ 
 
\t // browser window scroll (in pixels) after which the "back to top" link is shown 
 
\t var offset = 300, 
 
\t \t //browser window scroll (in pixels) after which the "back to top" link opacity is reduced 
 
\t \t offset_opacity = 1200, 
 
\t \t //duration of the top scrolling animation (in ms) 
 
\t \t scroll_top_duration = 700, 
 
\t \t //grab the "back to top" link 
 
\t \t $back_to_top = $('.cd-top'); 
 

 
\t //hide or show the "back to top" link 
 
\t $(window).scroll(function(){ 
 
\t \t ($(this).scrollTop() > offset) ? $back_to_top.addClass('cd-is-visible') : $back_to_top.removeClass('cd-is-visible cd-fade-out'); 
 
\t \t if($(this).scrollTop() > offset_opacity) { 
 
\t \t \t $back_to_top.addClass('cd-fade-out'); 
 
\t \t } 
 
\t }); 
 

 
\t //smooth scroll to top 
 
\t $back_to_top.on('click', function(event){ 
 
\t \t event.preventDefault(); 
 
\t \t $('body,html').animate({ 
 
\t \t \t scrollTop: 0 , 
 
\t \t \t }, scroll_top_duration 
 
\t \t); 
 
\t }); 
 

 
});

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" текст, но ничего не случилось.

Я пробовал использовать разные способы, но я не знаю, как это сделать. Спасибо.

источник

2017-01-12 Juan

Я не прошу вас, ребята, выполнить всю работу. Я просто нуждаюсь в гиде или litle crumb для продолжения работы. – Juan

Вы должны удалить text-indent: 100%. Это вернет текст в исходное положение.

EDIT:

Если после этого вы хотите, чтобы текст был рядом со стрелкой вы можете сделать что-то вроде этого:

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

источник

2017-01-12 15:32:14 TheYaXxE

Проклятье, я этого не видел. Спасибо вам большое! – Juan

Добро пожаловать. :) Проверьте мой обновленный ответ, где я разместил текст в той же строке, что и стрелка. – TheYaXxE

Спасибо, работает на 100% отлично, и я над ним работаю, меняя стиль и т. Д. – Juan

Свойство «text-indent» css является тем, что дает вам проблему. Удалите его, и вы увидите текст. Хорошим способом отладки этого типа является использование инструментов разработчика, а затем проверка элемента.

источник

2017-01-12 15:34:52

Спасибо. Теперь мне нужно работать в тексте, показывать его под или в той же строке. – Juan

Как: Добавить текст в верхнюю кнопку

ответ

Смежные вопросы