Кнопка "ВВЕРХ" для сайта

ВВЕРХ

Чтобы пользователь дойдя до конца страницы не уходил с сайта, применяют несколько уловок, например, размещают блок с похожими статьями, или плавающее меню, или ссылку к началу веб-документа. Как её сделать?

<a href='#' id='vverh'>ВВЕРХ</a>
Пример: ВВЕРХ.

Для того, чтобы она перемещалась вместе с прокруткой страницы (см. CSS) и появлялась не сразу, а только после прохождения первого экрана (см. JavaScript) добавим перед </head>

JavaScript:

<script>
window.onscroll = function vverh() {
  document.getElementById('vverh').style.display = (window.pageYOffset > '200' ? 'block' : 'none');
}
</script>

Стиль CSS:

Для Blogger все три части кода вносим в гаджет HTML/JavaScript, который нужно добавить сразу под "Сообщения блога", если боковая колонка расположена справа. как правильно поместить кнопку вверх в код веб страницы Или в левую панель, если она присутствует. как правильно поместить ссылку вверх в код web страницы

в f t
наверх ↑

125 комментариев:

Мич
Класс! Спасибо! Суперовская фишка!
NMitra
Да, мне тоже понравилась.
Rain
Спасибо очень не хватало этой функции.
NMitra
По другому спозицианируйте элемент:

#back-top {
position: fixed;
position: fixed; left: 0%; top: 97%;
}

Вместо

#back-top {
position: fixed;
margin-left: -100px;
bottom: 0px;}

А то у вас кнопка наезжает на левое меню. И либо добавите скрипт, либо

<div id='back-top'><a href='#top'><span></span>Наверх</a></div>

замените на

<div id='back-top'><a href="#"><span></span>Наверх</a></div>
Rustem Zakirov
Здравствуй, Наталья. Понравилась кнопочка наверх, но не знаю как поменять цвет. Вот ссылка на блог http://6tonn-kazan.blogspot.com/2011/05/blog-post_17.html (посмотри цвет плиз), как думаеш будет лучше? В тон блога стрелка и надпись (наверх) ярко синию сделать, или другой цвет выбрать? Потом, возможно ли квадратик вокруг трелки сделать прозрачнымЮ чтобы только стрелка была видна?
Подскажи плиз как поменять.
Спасибо.
NMitra
При работе с цветом мне помогают программы Colorpicker и Фотошоп - http://shpargalkablog.ru/2010/07/instrumenty-vebmastera-s-nulya.html.

Есть небольшая проблема: стрелка - это картинка, поэтому нужно либо искать в интернете другую картинку более подходящую под дизайн блога, либо открывать Фотошоп и редактировать эту - вот её адрес - http://www.mundodarkness.com.br/gd/topo.png.

Цвет квадратика определяется строкой:

background: #ddcca3 url(http://www.mundodarkness.com.br/gd/topo.png) no-repeat center center;

Уберите #ddcca3 совсем.

При наведении на ссылку фон квадрата:

#back-top a:hover span {
background-color: #777;
}

Аналогично: либо удалите, либо измените на свой.

Цвет текста в

#back-top a {
color: #bbb;
}

А при наведении

#back-top a:hover {
color: #000;
}

Здесь найдёте коды веб-безопасных цветов - http://shpargalkablog.ru/2010/09/optimizatsiya-images-blogger.html#Photoshop-PNG-8. Выше можете скачать Фотошоп.

А здесь http://shpargalkablog.ru/2011/04/fotoshop-s-nulya.html небольшой урок по Фотошопу, хотя вам понадобятся только карандаш да пипетка.

После того, как выберите/нарисуете картинку, загружаете её в Blogger и меняете адрес с http://www.mundodarkness.com.br/gd/topo.png на свой.
Rustem Zakirov
Спасибо огромное.
Rustem Zakirov
Не, всё таки вы самая лучшая. Ваш блог это чудо. Я столько перерыл в инете в поиске помощи, но не нашёл за всё время столько, сколько у вас за несколько дней. Самое главное оперативные ответы на вопросы. Ещё раз спасибо и удачи.
NMitra
Благодарю за столь лестный отзыв)))
PANIC
а можно как ВКонтакте сделать кнопку? чтобы не в определенное место ставить ссылку "наверх", а чтобы та двигалась вместе с прокручиванием страницы?

кстати, интересная стрелка у Вас внизу)
NMitra
Конечно. См. статью, где задаём
style="position: fixed; left: 93%; top: 97%;"
PANIC
но его нельзя на все страницы поставить?

и второй вариант, со стрелочкой. у меня трудность с расположением.
если задавать margin-left: -100px; то элемент находится слева от ПРАВОЙ границы тела сообщения (т.е. наезжает на текст сообщений), а не от левой, как у Вас здесь. если же задавать margin-right: -100px; то все нормально (справа от правой границы), но у меня боковая панель справа, поэтому стрелка наезжает на нее. может я не очень грамотно изъясняюсь, но как-то так... и пришлось задавать огромную величину этого отступа.
если же использовать не margin-left, а position: fixed; left: 0%; top: 97%; то стрелка будет прижата не к краю области текста, а к краю окна браузера.
и еще стрелка "скрывается" за нижней панелью.

и такой неприятный момент - если использовать этот вариант с использованием jQuery (или любой другой скрипт с jQuery), то не работает предложенный Вами вариант скрытия текста, где используется Googlа библиотеке API.
однако у Вас в одном блоге все вместе работает. это благодаря условным конструкциям, я полагаю? потому что кнопок "наверх" на других страницах в этом блоге я пока не заметила.
NMitra
Пока скрипт оставим на время - недавно посмотрела в Хроме - стрелку не видно. Скрипт только убирает стрелку вначале страницы.

Точно! Условные теги - это моё спасение. Некоторые скрипты работают в теле сообщения (не в head) и поэтому я их добавляю при написании статьи.

Всё верно, ты уже настоящий спец! margin-left: -100px; - это смещение влево. Оно должно быть равно ширине статьи, если его добавлять в гаджет. Я внедрила его в статью, поэтому смещение у меня меньше.

Чтобы не использовать скрипт, но оставить всё те же стили:

<div id='back-top'><a href="#"><span></span>Наверх</a></div>
Гунь Ольга
СПАСИБО!!!
NMitra
Рада помочь!
Laterna Magica
Наталья, помогите, спасите мой экспериментальный блог ))

http://ostrovsvobody.blogspot.com/

Стрелка постоянно высвечивается :\ Порылся в кодах, никак не понял, что нужно менять и что указывать. Стрелка все равно видна, и в начале страницы и в конце. Как сделать, чтобы она появлялась только во время прокрутки страницы вниз, а в начале страницы исчезала, вот к примеру как у вас. Помогите справиться с этим.
NMitra
Скрипт добавляли? К сожалению, сейчас ссылки на вашем блоге не вижу, поэтому трудно сориентироваться, где был допущен промах.
Laterna Magica
Спасибо Наталья за оперативность. Вы просто чудо. Когда вы отзываетесь на наш зов - сразу становится спокойно, так как уверен, с вами решим любую задачу и головоломку) Наталья, а скрипт нужно добавлять и в том случае, когда добавляем CSS? и что мне сделать, чтобы вы увидели ссылки?
Laterna Magica
Наталья )) Разобрался! Ваш совет очень помог. Всё идеально работает! Спасибо вашему блогу.
NMitra
Нужно было добавить элемент на страницу, чтоб можно было его подправить.

Вот и замечательно, что разобрались.
Vlsu
Огромное спасибо! Давно искал подобную конструкцию. Правда, кнопку разместил справа, а не слева
NMitra
Рада помочь!
О нас
Наталья! Вставила код "наверх" в боковой гаджет- не то. А куда вставить , чтобы как у вас - не знаю. Спасибо!
NMitra
Я вставляла прямо в тело сообщения. Можно в гаджет, но значения margin-left: -100px; нужно увеличить на ширину сообщения. Цифра получиться больше -1000px в зависимости от вашего шаблона.
О нас
Вставила в тело сообщения! Получилось! Опять вопросы:этот код нужно вставлять в каждое сообщение? Ещё у меня уходит много времени на вставление кодов "твит", "поделиться", " треугольнички" и т.д. По многу раз захожу в черновик. оттуда копирую готовый код, потом вставляю. Может можно как то по другому?
NMitra
Можно добавить в шаблон "Дизайн"-"Изменить HTML". См. http://shpargalkablog.ru/2011/03/kak-sdelat-odin-raz-na-vse-stati.html
О нас
Наталья! Видимо мне туго даётся! Сначала долго искала h2. Пыталась вставить этот код твит между h2. Увы! Может что то в коде надо поменять?
NMitra
Ай-яй, нельзя добавлять такие элементы в заголовки уровней h1-h6, только текст. Внесите после h2. Иногда нужно преобразовать код с помощью CoderHTML - http://shpargalkablog.ru/2010/07/instrumenty-vebmastera-s-nulya.html, особенно скрипты. Я пробую эмпирическим путём.

Для поиска используйте сочетания клавиш CTRL+F и в открывшееся окошко вводите h2.

Чтобы выровнять твит справа, найдите примерно такой код и добавьте выделенное жирным

h2 {
font: $(widget.title.font);
text-transform: $(widget.title.text.transform);
color: $(widget.title.text.color);
margin: .5em 0;
float: left;
}

Обязательно спрашивайте, отвечу. Иначе вконец можно запутаться. Я не всегда верно могу оценить знания читателя, поэтому могу что-то пропустить.
О нас
Прошла по ссылке. Вставила рекомендуемый код, выделенный синим. Потом вставила после код твита. Но на странице он не появился.
NMitra
Я поняла в чём дело, там несколько вхождений. Уберите предыдущие изменения. И добавьте выделенное жирным

<b:loop values='data:posts' var='post'>
        <b:if cond='data:post.isDateStart'>
          <b:if cond='data:post.isFirstPost == &quot;false&quot;'>
            &lt;/div&gt;&lt;/div&gt;
          </b:if>
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-outer&quot;&gt;
        </b:if>
        <b:if cond='data:post.dateHeader'>
          &lt;a href="http&#58;//twitter.com/share" class="twitter-share-button" data-url="&lt;data:post.url/&gt;" data-text="&lt;data:post.title/&gt;" data-count="horizontal" data-lang="ru"&gt;Твитнуть&lt;/a&gt;&lt;script type="text/javascript" src="http&#58;//platform.twitter.com/widgets.js"&gt;&lt;/script&gt;<style type="text/css">.twitter-share-button {float: right;} </style><h2 class='date-header'><span><data:post.dateHeader/></span></h2>
        </b:if>
NMitra
Код кнопки взят с официальной страницы - http://twitter.com/goodies/tweetbutton (Горизонтальный счётчик).
NMitra
Код немного другой:

&lt;a href=&quot;http://twitter.com/share&quot; class=&quot;twitter-share-button&quot; data-url=&quot;<data:post.url/>&quot; data-text=&quot;<data:post.title/>&quot; data-count=&quot;horizontal&quot; data-lang=&quot;ru&quot;&gt;Твитнуть&lt;/a&gt;&lt;script type=&quot;text/javascript&quot; src=&quot;http://platform.twitter.com/widgets.js&quot;&gt;&lt;/script&gt;<style type='text/css'>.twitter-share-button {float: right; padding: 10px;} </style>
О нас
Наталья! Мой случай, наверное,клинический! Сразу нашла куда вставить( ценный Ваш совет по поиску).Скопировала код. вставила. Опять ничего.Вставила другой. Ничего. Уже Вас достала! И все таки хочу вставить "поделиться", "наверх" и "твит".
NMitra
Зайдём с другого края. Заведите какой-нибудь тестовый блог. Установите этот шаблон. Посмотрите как там, ориентируясь на комментарий 30 и 32.

https://sites.google.com/site/spargalka1/rating/template-7245761304205757256.xml?attredirects=0&d=1

В реальных условиях легче понять в чём дело. Получилось?
О нас
Получилось! Спасибо! И на тестовом и на основном. Я даже вставила немножко в другое место и твит встал ниже даты, над заголовком. Выровнять к правому краю не получилось. А куда теперь вставить "наверх" и " поделиться" ?
Людмила и Владимир Казанцевы.
А в ещё один блог не вставляется. там нет строчки "пост ДатаСтарт"
Людмила и Владимир Казанцевы.
Нашла "ДатаСтарт"! Забыла поставить галочку "расширить".
NMitra
По-поводу "поделиться" мне нравится как здесь - http://shpargalkablog.ru/2011/02/sotsialnye-knopki-dlya-blogger.html#yandex

Кнопку "наверх" - до или после <data:post.body/>.
NMitra
Во втором блоге твит я вижу аж два раза.
О нас
Да! Один в сообщение вставила раньше. Старым способом. Надо убрать.Спасибо!
Людмила и Владимир Казанцевы.
Наталья! Выручайте! Убирала из каждого сообщения "поделиться" и "твит" и где то убрала лишнюю строчку HTML. Теперь профиль в самом низу! Что делать? Я в панике!
О нас
Наталья! Проблема, кажется, в строчке , В конце текста, где есть "utf-8" . Где то она есть, а где то нет . Кошмар! Я разрулю?
Людмила и Владимир Казанцевы.
Причём , если смотреть не всю ленту на главной, а по одному сообщению, бок на месте. Жду ваш волшебный совет!
NMitra
Не могу посмотреть, здесь шаблон нужен. Что делали с

<b:if cond='data:blog.url == data:blog.homepageUrl'>
Людмила и Владимир Казанцевы.
Это я делала не " изменить HTML", а редактировании сообщений. Убирала "поделиться" снизу сообщения и "твит" сверху сообщения. А на странице " дизайн" - "изменитьHTML" у меня всё отлично получилось. Всё встало на свои места. Мне кажется загвоздка вот в этой строчке в конце сообщения.Там есть такой значок utf-8, ява скрипт. Где то она есть, а где то нет. ( сообщение с кусочком HTML почему то не посылается).
Людмила и Владимир Казанцевы.
А эта строчка в "изменить HTML" у меня такая же . Не изменённая.
NMitra
Это ошибка шаблона. Сбросьте мне на почту один из них.
Якушевская Юлия Сергеевна
Добрый день, у меня не получается. Все сделала как у вас, но стрелка не отображается http://yakushevskaya.blogspot.com/
NMitra
Уберите одну строку

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js' type='text/javascript'></script>

Замените

#back-top {
position: fixed;
margin-left: -100px;
bottom: 0px;}

на

#back-top {
position: fixed;
right: 93%;
bottom: 0px;}
NMitra
Два раза одна и та же строка в коде.
Якушевская Юлия Сергеевна
Спасибо, но стрелка так и не появилась. Как я понимаю, то она должна появиться на главной странице?
NMitra
Ой, только сейчас заметила: строчки <div id='back-top'><a href='#top'><span></span>Наверх</a></div> не хватает.
Якушевская Юлия Сергеевна
Спасибо, теперь появилась стрелочка.
Якушевская Юлия Сергеевна
Наталья, очень прошу помочь в одном деле. Хочу настроить навигацию на обычной странице, например здесь http://yakushevskaya.blogspot.com/p/blog-page_9305.html
Вначале сделать типа меню (года: 2007, 2008, ...)
Нажимая на определенный год - > переходить к нему.
Я читала что-то у вас, но не поняла
С уважением, Якушевская Юлия
NMitra
Если я правильно поняла, вам нужны URL на страницы с архивом.

для 2011

http://yakushevskaya.blogspot.com/search?updated-min=2011-01-01T00%3A00%3A00-08%3A00&updated-max=2012-01-01T00%3A00%3A00-08%3A00&max-results=11

для 2010

http://yakushevskaya.blogspot.com/search?updated-min=2010-01-01T00%3A00%3A00-08%3A00&updated-max=2011-01-01T00%3A00%3A00-08%3A00&max-results=11

и т.п

где max-results=11 - количество показываемых записей на одной страницы
y.trubchyk
Наталья.., простите, что беспокою..., но у меня никак не получается аналог Вашего примера. Можно , как-то показать код, а то только примитивный метод получился ( внизу блога и все), хочется плавающую стрелку...!) Спасибо за ранее.

вот блог http://bredstory.blogspot.com/
Irinka Story
Ура-ура!!! Я в кодах,скриптах и д.т вообще ни бум бум а с Вашей помощью получилось!!!! И цвет кнопочки подойдёт! Спасибо.
y.trubchyk
все...) сделал..делаем новое что-то) Спасибо большое..!
NMitra
Без моей помощи обошлось! На выходных, как правило, вне компьютера.
Марсель Сакаев
Спасибо огромное за кнопочку. А какой параметр отвечает за появление кнопки. Сейчас она появляется очень быстро. Хочу сделать так, чтобы она появлялась тогда, когда вниз прокручено 80% материала.
NMitra
В скрипте замените

if ($(this).scrollTop() > 100) {

на

if ($(this).scrollTop() > 1000) {

Или любую другую цифру.
Марсель Сакаев
Спасибо огромное )) У меня нет слов, чтобы выразить свою благодарность ))
NMitra
Как приятно это слышать)
Irinka Story
У меня всё распрекрасно работало, а позавчера заметила что сама стрелка пропала...Загрузила бекап когда всё работало, но все равно-----(
Что делать? http://potapenkoira.blogspot.com/
NMitra
С сайтом, откуда я позаимствовала рисунок, случилось какая-то неприятность. Замените http://www.mundodarkness.com.br/gd/topo.png на другой адрес, например, на http://3.bp.blogspot.com/-Q0hVWzKDCJo/Tpar8l5wvJI/AAAAAAAACZ4/LbpuEBAIQAU/s60/strelka.png
Irinka Story
Спасибо огромное за помощь и мгновенную оперативность!!! а как такие стрелочки можно поискать, чтоб по дизайну подходило?
Анонимный
Доброго времени.
Вопрос такой, можно ли это сделать на обычной странице сайта?
У меня почему-то ничего не выходит. Хотя в html я не спец.
У меня только вверху в центре появляется (при прокрутке) ссылка "Наверх" и исчезает. Переместить ее не получается, а картинки, так вообще нет.
Вот что у меня получилось и в чем ошибка?
Если не трудно, подправите код.
Все <> заменил на *, а то не принимало сообщение.

*!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"*
*!-- saved from url=(0014)about:internet --*
*html**head*
*meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"*
*meta http-equiv="Content-Language" content="ru"*
*meta http-equiv="Content-Type" content="text/html; charset=windows-1251"*
*title*Безымянная страница*/title*
*style type="text/css"*
div#container
{
width: 994px;
position: relative;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
*/style*
*style type="text/css"*
body
{
text-align: center;
margin: 0;
background-color: #FFFFFF;
color: #000000;
}
*/style*

*script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"**/script*

*script*
$(document).ready(function(){

// hide #back-top first
$("#back-top").hide();

// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() * 100) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});

// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});

});
*/script*
*/head*
*body
#back-top {
position: fixed;
margin-left: -100px;
bottom: 0px;}

#back-top a {
width: 70px;
display: block;
text-align: center;
font: 11px/100% Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #bbb;
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}

#back-top a:hover {
color: #000;
}

#back-top span {
width: 70px;
height: 70px;
display: block;
margin-bottom: 7px;
background: #ddcca3 url(http://3.bp.blogspot.com/-Q0hVWzKDCJo/Tpar8l5wvJI/AAAAAAAACZ4/LbpuEBAIQAU/s60/strelka.png ) no-repeat center center;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}

#back-top a:hover span {
background-color: #777;
}





*div id="container"*
*div id="wb_Line1" style="margin:0;padding:0;position:absolute;left:185px;top:4505px;width:459px;height:5px;text-align:left;z-index:0;"*
*img src="%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D0%B01_files/img0039.png" id="Line1" alt="" title="" style="border-width: 0pt; width: 467px; height: 13px;"**/div*
*/div*

*/body*
*div style="display: none;" id="back-top"**a href="#"**span**/span*Наверх*/a**/div*

*/html*
Анонимный
Вот спасибо. Сообщение удалили и всё. Хоть бы пояснили, почему?
Анонимный
<a href="http://ссылка" title="текст
NMitra
Доброго времени.
Меня не было в сети, а Blogger посчитал, что комментарий спамный. Конечно, можно:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content='IE=EmulateIE7, IE=edge' http-equiv='X-UA-Compatible'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<title>Безымянная страница</title>
<style type="text/css">

body {
  margin: 0;
  background-color: #FFFFFF;
  color: #000000;
  }
/* не нужно text-align: center; */

div#container {
  width: 994px;
  position: relative;
  margin-top: 0px;
  margin-left: auto;
  margin-right: auto;
  }
/* тогда не нужно text-align: left; */

#back-top {
  position: fixed;
  margin-left: -100px;
  bottom: 0px;}

#back-top a {
  width: 70px;
  display: block;
  text-align: center;
  font: 11px/100% Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  text-decoration: none;
  color: #bbb;
  -webkit-transition: 1s;
  -moz-transition: 1s;
  transition: 1s;
}

#back-top a:hover {
  color: #000;
}

#back-top span {
  width: 70px;
  height: 70px;
  display: block;
  margin-bottom: 7px;
  background: #ddcca3 url(http://3.bp.blogspot.com/-Q0hVWzKDCJo/Tpar8l5wvJI/AAAAAAAACZ4/LbpuEBAIQAU/s60/strelka.png ) no-repeat center center;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  -webkit-transition: 1s;
  -moz-transition: 1s;
  transition: 1s;
}

#back-top a:hover span {
  background-color: #777;
}

#wb_Line1 {
  margin: 0;
  padding: 0;
  position: absolute;
  left: 185px;
  top: 4505px;
  width: 100%;
  height: 100%;
  }
/* здесь я не поняла что к чему, зачем делать высоту меньше высоты изображения */

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

<script>
$(document).ready(function(){

 // hide #back-top first
 $("#back-top").hide();
 
 // fade in #back-top
 $(function () {
  $(window).scroll(function () {
   if ($(this).scrollTop() > 100) {
    $('#back-top').fadeIn();
   } else {
    $('#back-top').fadeOut();
   }
  });

  // scroll body to 0px on click
  $('#back-top a').click(function () {
   $('body,html').animate({
    scrollTop: 0
   }, 800);
   return false;
  });
 });

});
</script>

</head>

<body>

<div id="container">

<div id="wb_Line1"><img alt="" src="%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D0%B01_files/img0039.png" border="0" height="13" width="467"/></div>

<div id='back-top'><a href='#top'><span></span>Наверх</a></div>

</div>

</body>
</html>
ЭкоЛидер
Вопрос № 1
Если нажать на стрелку вверх, потом выбрать другую вкладку в браузере и снова вернуться на страницу со стрелкой, то появляется рамка с пунктиром, как её убрать?

Вопрос № 2
Сделал стрелку по середине на сайте: http://www.ecoleader.ru/razrabotka-pasportov-opasnyh-othodov-cena-stoimost.html

часть кода выглядит так:

#back-top span {
width: 70px;
height: 500px;

Правильно ли я сделал? или есть способы установить стрелку более корректно? Хочу сделать, чтобы не обязательно было наводить точно на стрелку, а как в контакте - просто на левое поле!
ЭкоЛидер
Рамка появляется вокруг стрелки.
NMitra
Примените стили, должны решиться проблемы.

#back-top {
position: fixed;
margin-left: -250px;
bottom: 0px;
height: 100%;}

#back-top a {
width: 200px;
display: block;
text-decoration: none;
color: #002400;
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
height: 100%;}

#back-top a:hover {
color: #002400;
background: #777;}


#back-top span {
width: 200px;
height: 70px;
display: block;
margin-bottom: 7px;
background: url(http://3.bp.blogspot.com/-Q0hVWzKDCJo/Tpar8l5wvJI/AAAAAAAACZ4/LbpuEBAIQAU/s60/strelka.png) no-repeat;
}
ЭкоЛидер
Спасибо!
Скажите пожалуйста, есть ли у Вас на сайте статья, как вывести кнопки в социальные сети отдельным блоком (div), чтобы их внешние ссылки не учитывались поисковиками. Т.к. ноуиндекс и ноу фоллоу абсолютно бессмыслены - вес страница теряет в никуда!
NMitra
Нет, посмотрите в коде Сосновского.
NMitra
Посмотрите здесь http://seodiz.ru/hide-content
Анонимный
Что-то у меня вообще ничего не появляется. Вставил в исходный код эти два больших куска кода, но результата нет.
NMitra
Вы про данную статью? Там три куска кода. Каков адрес у вас.
Полина
Я использую конструкцию вида #tab-1 для перехода на закладки. При этом при переходе страница подскакивает, то есть вкладка поднимается к самому верху страницы. Это не очень удобно. Можно как то сделать чтобы элемент, на который ссылаются, при переходе отображался посередине страницы?
NMitra
Какова страница? Мне нужно визуально увидеть, что вы имеете ввиду.
Полина
Обычное отображение страницы:
http://s019.radikal.ru/i610/1203/e0/3bea9a5200af.jpg

При клике на вкладку
http://s58.radikal.ru/i160/1203/9b/5ff27f066223.jpg

Хотелось бы, чтоб отображение страницы оставалось как на первой картинке.
NMitra
Полный код, и CSS стиль. По скриншоту не ясно куда кликают.

Сделайте ссылку, добавив немного скрипта: href="javascript:void(0);"

<a href="javascript:void(0);" onclick="функция;">CLICK</a>

или

<a href="#" onclick="функция;return false;">CLICK</a>
Полина
Код не пишу, он достаточно большой. Все сделано точно по такому же принципу:
http://kobzarev.com/makeup/tabs-in-pure-css.html
NMitra
Нужно добавлять скрипт. На основе вашего примера, переделала статью http://shpargalkablog.ru/2011/01/forma-s-vkladkami.html
Дмитрий46
Подскажите, почему, когда я ставлю скрипт на кнопку вверх, то у меня блог прокручиваться начинает с большими тормозами? Скрипт правда с другого сайта, но я их раньше несколько пробовал ставить и после всех сайт начинает тормозить. Тормозит от кнопки вверх, которая появляется не сразу и прокручивает вверх сайт плавно (наподобие той, которая у вас слева сейчас находится). Можно ли избавится от тормозов, не удаляя этот скрипт?
NMitra
Там у скрипта могут быть разные настройки, например, время задержки. Не могу вам сказать за другие скрипты, обратитесь к разработчику.
Дмитрий
А я методом тыка нашел, как заставить работать этот скрипт на сайте под управлением asp.net 4.0 в visual studio 2010 :) Все прекрасно работает, спасибо!
Анонимный
Спасибо, все работает.
NMitra
Отлично!
Людмила Лукашова
Привет! Я полный лузер в этих ваших настройках! Читаю, читаю, ни хе не понимаю))) А можно разжевать по типу, зайди туда, открой это, скопируй тут, вставь сюда! По тому как я новичок и уже все перетыкала!Ни чего не изменилось! HELP
NMitra
Я подкорректировала статью.
Людмила Лукашова
Спасибо! Теперь понятно! Вы просто умница!
Людмила Лукашова
У меня еще один вопросик! Я установила стрелку справа, мне так удобнее, но серый фон остается слева и закрывает текст,как его убрать( или сделать справа)? Спасибо !
NMitra
margin-left: -104%;
padding: 100% 1% 0 99%;

поменять на

margin-left: 7%; /* своё значение */
padding: 100% 99% 0 1%;

И перенести гаджет вправо.
Анонимный
Огромное спасибо. Стили конечно же подстроил под свой дизайн, а функционал хорош )
NMitra
Самое главное разобраться со способом реализации, а дальше всё просто :)
Detsle
Как сделать, чтобы кнопка появлялась после прокрутки страницы, процентов на 10.
Вот код: http://notepad.cc/kod-detsle
Detsle
Интересует без применения jQuery.
NMitra
Без jQuery реализацию не встречала.
Анонимный
спасибо!
NMitra
Сама в восторге :)
Анонимный
Прошу помочь. Как убрать кнопку Jquery всамом низу страницы. Т.е. она появляется после 100пкс., а пропадает всамом низу, т.к в футере будет ссылка "наверх"
NMitra
Я скрипт подправила. Поменяйте там
scrollBottom() < 300
scrollTop() > 100
на свои значения.
NMitra
$(document).ready(function(){
 $("#back-top").hide();
 $.fn.scrollBottom = function() {
   return $(document).height() - this.scrollTop() - this.height();
 };
 $(function () {
   $(window).scroll(function () {
     if ($(this).scrollBottom() < 300) {
       $('#back-top').fadeOut();
     } else {
       if ($(this).scrollTop() > 100) {
         $('#back-top').fadeIn();
       } else {
         $('#back-top').fadeOut();
       }
     }
   });
 });
});
NMitra
Detsle, сделала, см. статью.
NMitra
Чтобы убрать кнопку в самом низу, записываю для себя

<script>
vverh()
setInterval(vverh,1);
function vverh() {
Height = document.documentElement.scrollHeight - '800';
document.getElementById('vverh').style.display = (window.pageYOffset < Height && window.pageYOffset > '200' ? 'block' : 'none');
document.getElementById('raz').innerHTML = Height;
}
</script>
Dmitro Mazaihin
странно..у меня скрипт проработал два дня (((
NMitra
"проработал два дня" - а дальше? Сломался? Покажите свой сайт
Tanya Batrak
Доброе утро! Поставила кнопку на два блога давненько уже, а вчера написала знакомая, которая юзает Сафари. Так вот в Сафари как только долистываешь до кнопки - креш! Сразу закрывается браузер с такой вот ошибкой: WebKit2WebProcess.exe Обнаружена ошибка.
:( Что за проблема и как решить, подскажите,потому что кнопочка очень нужная.
NMitra
Доброе утро! Как всегда нужен адрес блога и скриншот ;)
Татьян, ещё сверься с кодом, я его довольно сильно изменила.
Tanya Batrak
Я уже убрала кнопку. Сейчас верну ее

блог http://www.tanyabatrak.com/

код такой

Tanya Batrak
как вставить код? а то я его закомментила )) чтобы не ругался, ну и теперь его не видно в сообщении тут
NMitra
Скрипт посмотрела прямо на блоге. А как ошибка выглядит в Сафари? Мне нужен скриншот.
Анатолій Нечипурук
Скажите пожалуйста ... а как же изменить ширину затемнения, к к примеру как это сделано у вас, как сделать?

http://nechipuruk.blogspot.com/p/blog-page_5044.html
Заранее спасибо
Анатолій Нечипурук
А то получается на пол страницы, а это как мне кажется — не комильфо
Анатолій Нечипурук
Разобрался. Единственная проблема -это то, что кнопка наверх не работает в IE
Подскажите пожалуйста, как вылечить этот недуг?

Код: http://pastebin.ca/2428073 (HTML/JavaScript с кодом расположил под виджетом "сообщения блога")

Блог: http://nechipuruk.blogspot.com/p/blog-page_5044.html#
NMitra
У меня на компьютере на вашем блоге работает в IE.
Сергей Хамзин
Сайт супер постоянно что то новое читаю тут автор вы хороший человек знания сила. Спасибо.
NMitra
Поддерживаю! Знания сила!
Анонимный
Криво! При наведении активна должна быть только кнопка, а не вся боковая колоночка.
NMitra
Так цель была именно такая. Вы можете изменить стиль

a#vverh {
display: none;
position: fixed;
margin-left: -7em;
bottom: 0;
font: 11px/100% Arial, Helvetica, sans-serif;
text-decoration: none;
color: #bbb;
transition: 1s;
}
a#vverh:before {
position: absolute;
content: url(http://3.bp.blogspot.com/-Q0hVWzKDCJo/Tpar8l5wvJI/AAAAAAAACZ4/LbpuEBAIQAU/s60/strelka.png);
margin: -55px 0 0 -12px;
}
a#vverh:hover {
color: #000;
background-color: rgba(0,0,0,.3);
}


Или так

a#vverh {
display: none;
position: fixed;
left: 20px;
bottom: 0;
font: 11px/100% Arial, Helvetica, sans-serif;
text-decoration: none;
color: #bbb;
transition: 1s;
}
a#vverh:before {
position: absolute;
content: url(http://3.bp.blogspot.com/-Q0hVWzKDCJo/Tpar8l5wvJI/AAAAAAAACZ4/LbpuEBAIQAU/s60/strelka.png);
margin: -55px 0 0 -12px;
}
a#vverh:hover {
color: #000;
background-color: rgba(0,0,0,.3);
}

Руслан
Чушь какая то не получилось как у вас!
NMitra
Покажите что у вас получилось. Какая страница блога?
Юрий
Можете помочь в создании кнопки наверх для моего сайта? Перепробовал сотни вариантов, не получается. Сайт на конструкторе, сторонние скрипты устанавливаются без проблем, проблема только с этой кнопкой. Нужен готовый скрипт. Готов оплатить Ваши труды.
NMitra
А куда вы её хотите поместить? По углам уже сидят другие элементы. В вашем случае я бы не стала её делать: у вас, во-первых, не такие длинные страницы, во-вторых, дублируется меню и хлебные крошки внизу, в-третьих, акцент сделан на иконку звонка.