Тема: Скролл или внутренние гиперссылки

Доброго времени уважаемые Вы мои. Использую на сайте ссылки типа http://site.ru/catalog/page.html#a1. Думаю местным бандитам объяснять не нужно что при переходе на страницы с октоторпом на конце (с решеткой) автоматически скроллит страницу таким образом что id=a1 становится в самую верхнуюю часть экрана.

Задача:
Нужно сделать отступ от сверху при переходе с таких ссылок. Или подскажите какой псевдокласс рыть

Заранее всем спасибо

Re: Скролл или внутренние гиперссылки

KEFIR пишет:

октоторпом

Чё сказал? smile

Суть я понял так, что тебе надо, чтобы при переходе к якорю на странице этот якорь оказывался не в самой верхней точке экрана, а ниже, то есть было какое-то расстояние между верхней границей и якорем. Классный вопрос - я бы и сам хотел знать, как это реализовать.
Я такого никогда не видел. И, мне кажется, что если такое и возможно, то тут не обойтись без javascript...

Лично я в подобных ситуациях просто ставлю якорь в предыдущем абзаце, если нужен отступ. А еще мне кажется, что люди уже привыкли переходя по якорям видеть цель в самом верху экрана...

Re: Скролл или внутренние гиперссылки

admin, цель понял правильно но js подключать не хочу.

admin пишет:

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

Думаю если решения не найду так и придётся делать

admin пишет:

А еще мне кажется, что люди уже привыкли переходя по якорям видеть цель в самом верху экрана...

В верхней части экрана фиксированный блок который собственно и мешает при просмотре, когда переходишь к якорю

4

Re: Скролл или внутренние гиперссылки

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

5 (23.04.2013 02:06 отредактировано KEFIR)

Re: Скролл или внутренние гиперссылки

ПафНутиЙ, Зачётно смотрится! Но 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 и тд.), другой для якорей в тексте:

6

Re: Скролл или внутренние гиперссылки

KEFIR,
вполне нормальное решение.

я лично ни разу не видел человека с отключеным js в браузере )) 95% сайтов в принципе не будут работать, если отключить js в браузере.

Re: Скролл или внутренние гиперссылки

ПафНутиЙ, хм....возможно ты и прав. Но экономия на протоколах скорость сайта туда сюда big_smile я пока на денвере сделал не знаю даже что лучше красотульки с js или строгий синтаксис css.

Еще 1 этот же скрипт использует библиотеку jquery да? Это получается надо подключать несколько скриптов?...

ПафНутиЙ, На сайте который ты мне дал, содержание подсвечивается когда прокручиваешь страницу, мне такое решение нравится и даже очень, как реализовано?

Я конечно не подсветкой хочу а чтобы блок менялся динамически т.е просматриваешь сектор например "Список литературы" в блоке динамически замещается ссылка на просматриваемую при наведении разумеется всё содержание с маркером локализации. вот такая вот задумка. Есть соображения?

8

Re: Скролл или внутренние гиперссылки

KEFIR пишет:

Еще 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-файле.

KEFIR пишет:

Я конечно не подсветкой хочу а чтобы блок менялся динамически т.е просматриваешь сектор например "Список литературы" в блоке динамически замещается ссылка на просматриваемую при наведении разумеется всё содержание с маркером локализации. вот такая вот задумка. Есть соображения?


тут уже только js

9 (21.06.2013 21:52 отредактировано maksclub)

Re: Скролл или внутренние гиперссылки

ПафНутиЙ пишет:

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)

10

Re: Скролл или внутренние гиперссылки

maksclub,
Первый вопрос
второй