Сообщество читателей блога alaev.info
Не ссы! Входи или зарегистрируйся!
Форум АлаичЪ'а о SEO → Дизайн и верстка → Скролл или внутренние гиперссылки
Стр.: 1
Надо войти или зарегиться
Доброго времени уважаемые Вы мои. Использую на сайте ссылки типа http://site.ru/catalog/page.html#a1. Думаю местным бандитам объяснять не нужно что при переходе на страницы с октоторпом на конце (с решеткой) автоматически скроллит страницу таким образом что id=a1 становится в самую верхнуюю часть экрана.
Задача:
Нужно сделать отступ от сверху при переходе с таких ссылок. Или подскажите какой псевдокласс рыть
Заранее всем спасибо
октоторпом
Чё сказал? 
Суть я понял так, что тебе надо, чтобы при переходе к якорю на странице этот якорь оказывался не в самой верхней точке экрана, а ниже, то есть было какое-то расстояние между верхней границей и якорем. Классный вопрос - я бы и сам хотел знать, как это реализовать.
Я такого никогда не видел. И, мне кажется, что если такое и возможно, то тут не обойтись без javascript...
Лично я в подобных ситуациях просто ставлю якорь в предыдущем абзаце, если нужен отступ. А еще мне кажется, что люди уже привыкли переходя по якорям видеть цель в самом верху экрана...
admin, цель понял правильно но js подключать не хочу.
Лично я в подобных ситуациях просто ставлю якорь в предыдущем абзаце, если нужен отступ.
Думаю если решения не найду так и придётся делать
А еще мне кажется, что люди уже привыкли переходя по якорям видеть цель в самом верху экрана...
В верхней части экрана фиксированный блок который собственно и мешает при просмотре, когда переходишь к якорю
KEFIR,
без js никак не получится "недокручивать" до верха страницы, однако код то всего в три строки:
hash_id = location.hash.substr(1);
$(window).load(function() {
if (hash_id) {
$("html,body").animate({scrollTop:$('#'+id).offset().top-50}, 500);
}
});где 50 - сколько пикселей недокручивать, а 500 - скорость анимации.
Особенно эффективно смотрится когда не переходишь на новую страницу, а ходишь по якорям. Вот тебе пример: http://blockpro.ru/documentation/#catIcon
ПафНутиЙ, Зачётно смотрится! Но 1 но - у тех у кого нет js что делать?
Добавлено: 23.04.2013 01:05
Проблему решил закрывайте тему
Добавлено: 23.04.2013 01:05
Ах да чуть не забыл решение -
.anchor {
display:inline-block;
margin:-50px 0 -20px; 0;
padding:40px 0 0 0;
position: relative;
bottom: 0;
width:100%;
z-index: -1;
}
.text_anchor {
display:inline-block;
margin:-50px 0 0 0;
padding:50px 0 0 0;
position: relative;
bottom: 0;
z-index: -1;
} Пришлось делать два стиля, один для заголовков (h1 и тд.), другой для якорей в тексте:
KEFIR,
вполне нормальное решение.
я лично ни разу не видел человека с отключеным js в браузере )) 95% сайтов в принципе не будут работать, если отключить js в браузере.
ПафНутиЙ, хм....возможно ты и прав. Но экономия на протоколах скорость сайта туда сюда 
я пока на денвере сделал не знаю даже что лучше красотульки с js или строгий синтаксис css.
Еще 1 этот же скрипт использует библиотеку jquery да? Это получается надо подключать несколько скриптов?...
ПафНутиЙ, На сайте который ты мне дал, содержание подсвечивается когда прокручиваешь страницу, мне такое решение нравится и даже очень, как реализовано?
Я конечно не подсветкой хочу а чтобы блок менялся динамически т.е просматриваешь сектор например "Список литературы" в блоке динамически замещается ссылка на просматриваемую при наведении разумеется всё содержание с маркером локализации. вот такая вот задумка. Есть соображения?
Еще 1 этот же скрипт использует библиотеку jquery да? Это получается надо подключать несколько скриптов?...
ну так jquery тоже в 90% случаев подключена к сайту )) Не понимаю как вообще можно сдеать сайт без скриптов, плагинов и т.п.
Подключаю jquery обычно вот так:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.9.1.min.js"><\/script>')</script>в этом случаи, если вдруг случится, что cdn гугла будет недоступен - библиотека загрузится с сайта (вероятность крайне мала, но на денвере, без подключения к интернету это важно)) )
Строгий синтаксис CSS - бред, вендорные префиксы тебе не дадут никогда пройти валидацию css, да и не нужна она, я вообще никогда не запускаю валидатор cssб а вместо костылей для говнобраузера использую вот такую конструкцию:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="ru"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="ru"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="ru"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="ru"> <!--<![endif]-->соответственно все специфические, для нужной версии IE, классы лежат рядом с основными в одном css-файле.
Я конечно не подсветкой хочу а чтобы блок менялся динамически т.е просматриваешь сектор например "Список литературы" в блоке динамически замещается ссылка на просматриваемую при наведении разумеется всё содержание с маркером локализации. вот такая вот задумка. Есть соображения?
тут уже только js
KEFIR,
без js никак не получится "недокручивать" до верха страницы, однако код то всего в три строки:hash_id = location.hash.substr(1);
$(window).load(function() {
if (hash_id) {
$("html,body").animate({scrollTop:$('#'+id).offset().top-50}, 500);
}
});где 50 - сколько пикселей недокручивать, а 500 - скорость анимации.
Особенно эффективно смотрится когда не переходишь на новую страницу, а ходишь по якорям. Вот тебе пример: http://blockpro.ru/documentation/#catIcon
Добрый день, спасибо за совет- но есть ряд вопросов (очень наболевших)
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- на сайте вышеуказанном есть интересный момент: при перелистывании страницы роликом мышки активируется пункт меню, соответствующий тому разделу , который активен сейчас- подскажите с кодом
- долго прочесывал интернет- ни один совет не помог, выделение активной вкладки меню (как на выше указанном сайте)
подскажите решение (хоть JS, хоть PHP)
maksclub,
Первый вопрос
второй
Стр.: 1
Надо войти или зарегиться
Форум АлаичЪ'а о SEO → Дизайн и верстка → Скролл или внутренние гиперссылки
Форум работает на PunBB