Изменение положения при переходе по внутренней ссылке

@B@bruych@n1n · Регистрация: 22.04.2010

Студворк — интернет-сервис помощи студентам

Имеется страница с шапкой, шапка фиксирована, и текстовый блок, который скролится под шапку. При переходе по внутренней ссылке в пределах документа, якорь поднимается до верхней границы экрана, под шапку. Подскажите пожалуйста скрипт, который мог бы исправить этот косяк

@newJS · 22.11.2012, 08:31

похоже? прыгает на высоту шапки

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title>Скроллинг страницы</title>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<link rel="stylesheet" type="text/css" href="scr1.css">
<script type="text/javascript" src="scr1.js"></script>
<style type="text/css">
#hat {width:99%; height:173px; position:fixed; top:0px; left:0px;}
#hat {border:1px solid red;}
</style>
<script type="text/javascript">
var m, k;
m=document.getElementsByTagName("a");
k=m.length;
while(k--){if(m[k].href.lastIndexOf("#top1")>0){m[k].onclick=clickLink;}};
 
 };
 
function clickLink(){
var h=document.getElementById("hat").offsetHeight;
if(document.compatMode=="CSS1Compat"){document.documentElement.scrollTop=h;}
else{document.body.scrollTop=h;};
return false;
 };
</script>
</head>
 
<body>
 
<div id="hat">шапка</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a name="top1"></a>верх<br><br>
<a href="#top1">на верх</a>
<br><br><br><br><br><br><br><br><br><br>
<a href="#top1">на верх</a>
<br><br><br><br><br><br><br><br><br><br>
<a href="#top1">на верх</a>
<br><br><br><br><br><br><br><br><br><br>
<a href="#top1">на верх</a>
<br><br><br><br><br><br><br><br><br><br>
 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 
 
</body>
</html>

@B@bruych@n1n · 22.11.2012, 16:57 **[ТС]**

не совсем то, что нужно. данный скрипт при адаптации под мой вариант опускает ссылку, но проблема в том что ссылка идет перед текстом.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<script type="text/javascript">
var m, k;
m=document.getElementsByTagName("a");
k=m.length;
while(k--){if(m[k].href.lastIndexOf("#2")>0){m[k].onclick=clickLink();}};
 
function clickLink(){
var h=100;
if(document.compatMode=="CSS1Compat"){document.documentElement.scrollTop=h;}
else{document.body.scrollTop=h;};
return false;
    };
</script>
    <!-- CONTENT -->
    <div role="main" class="main-content">      
        <!-- manual-->          
        <div class="wrap clearfix">
            <div class="b-manual">
                <header class="clearfix">
                    <h1>РУКОВОДСТВО ПОЛЬЗОВАТЕЛЯ  GOPHOTOWEB.RU</h1>
                </header>
                <div class="b-manual-box">
                    <p><ol>
                        <li><a href="#1">ПОДГОТОВКА ФОТОГРАФИЙ ДЛЯ САЙТА</a></li>
                            <ol class="list-style"><li><a href="#2">1.1 Как правильно сохранять фотографии в программе Adobe Photoshop</a></li></ol>
                        <li><a href="#3">СИСТЕМА УПРАВЛЕНИЯ</a></li>
                        <li><a href="#4">ГЛАВНАЯ</a></li>
                        <li><a href="#5">СОЗДАНИЕ МЕНЮ</a></li>
                        <li><a href="#6">ДОБАВЛЕНИЕ СТРАНИЦ</a></li>
                        <li><a href="#7">ДОБАВЛЕНИЕ ГАЛЕРЕЙ</a></li>
                            <ol class="list-style"><li><a href="#8">7.1 Создаем галерею</a></li>
                            <li><a href="#9">7.2 Создаем категорию</a></li>
                            <li><a href="#10">7.3 Создаем приватную галерею</a></li>
                            <li><a href="#11">7.4 Добавление/редактирование фотографий в галереях</a></li></ol>
                        <li><a href="#12">ВИДЕО</a></li>
                            <ol class="list-style"><li><a href="#13">9.1 Как добавить видео-галерею</a></li>
                            <li><a href="#14">9.2 Добавление/редактирование видеороликов в галереях</a></li></ol>
                        <li><a href="#15">ДОБАВЛЕНИЕ НА ТЕКСТОВЫЕ СТРАНИЦЫ ССЫЛОК</a></li>
                        <li><a href="#16">МУЗЫКА</a></li>
                        <li><a href="#17">КАЛЕНДАРЬ ЗАНЯТОСТИ</a></li>
                            <ol class="list-style"><li><a href="#18">12.1 Настройка календаря</a></li>
                            <li><a href="#19">12.2 Заполнение и активация календаря</a></li></ol>
                        <li><a href="#20">СТАТИСТИКА</a></li>
                            <ol class="list-style"><li><a href="#21">13.1 Подключение Google Analytics</a></li>
                            <li><a href="#22">13.2 Вывод статистики из Google Analytics в панели управления сайтом</a></li></ol>
                        <li><a href="#23">НАСТРОЙКИ</a></li>
                            <ol class="list-style"><li><a href="#24">14.1 Общие</a></li>
                            <li><a href="#25">14.2 Фотографии</a></li>
                            <li><a href="#26">14.3 Музыка</a></li>
                            <li><a href="#27">14.4 Логотип</a></li>
                            <li><a href="#28">14.5 Пароль</a></li></ol>
                    </ol></p>
                </div>
                <div class="b-manual-box">
                <h3 id="1">1. ПОДГОТОВКА ФОТОГРАФИЙ ДЛЯ САЙТА.</h3>
                <p>Для каждого раздела сайта есть свои технические требования к фотографиям. Они представлены в системе управления сайтом в информационном окне («Памятка по размерам фотографий») под меню.</p>
                <p>Вы можете размещать в галерее своего сайта фотографии любых пропорций: горизонтальные, вертикальные, квадратные и т.д. Важно: первая цифра в размерах фото – это размер по горизонтали, вторая – размер по вертикали!</p>
                <p>Если размер фотографии (в пикселях) меньше, чем максимально допустимый размер для данного сайта, то фотография на сайте будет центрироваться.</p>
                <div class="b-manual-box-img">
                <img src="<?=$path_host?>img/manual/3/1.jpg" />
                </div>
                <h5 id="2"><b>1.1 Как правильно сохранять фотографии в программе Adobe Photoshop.</b></h5>
                <p>Для сохранения фотографий в Adobe Photoshop необходимо использовать функцию File > Save For Web (Ctrl+Alt+Shift+S):</p>
                <div class="b-manual-box-img">
                <img src="<?=$path_host?>img/manual/3/2.png" />
                </div>
                <p>Фотографии для сайта лучше всего подготавливать в формате jpg с 80% качеством.</p>
                <div class="b-manual-box-img">
                <img src="<?=$path_host?>img/manual/3/3.png" />
                </div>

При клике на ссылку 1.1 Как правильно сохранять фотографии в программе Adobe Photoshop, страница не перескакивает на якорь 2, она просто опускается на высоту, которая задана в h.

@newJS · 22.11.2012, 21:26

ИД начинающиеся с цифры в природе не существует, должно начинаться с англицкой буквы или символа подчеркивания

А где якоря? это <h5 id="2"> не якорь

Сообщение от B@bruych@n1n

она просто опускается на высоту, которая задана в h.

наверно неправильно понял что надо

попробуй упаковать в архив полную страницу с картинками и толком объясни что куда должно подниматься/опускаться

@B@bruych@n1n · 23.11.2012, 11:01 **[ТС]**

Залил архив из странички и стиля на обменник. Ссылка под спойлером

Кликните здесь для просмотра всего текста

{ссылка невалидна}

Имеется хидер с позицией fixed. Ниже хидера оглавление. При нажатии на оглавление происходит переход к нужной главе в пределах данной страницы. Но название нужной главы и начало ее оказывается под хидером. Необходимо, чтобы название главы и начало при переходе на нее не перекрывалось хидером

Комментарий модератора

Прикрепляйте файлы и изображения к сообщениям

@B@bruych@n1n · 23.11.2012, 14:48 **[ТС]**

manual.rar
Архив со страницей и стилями

@newJS · 25.11.2012, 07:26

работают три первых, я за тебя такое количество ошибок править не буду, для этого есть валидатор.
в ие8 не работает fixed, хотя должен, скорее всего из за ошибок

Новые блоги и статьи Все статьи Все блоги /
Хочу заставить корпорации вкладываться в здоровье сотрудников: делаю мат модель здравосохранения anaschu 22.03.2026 e7EYtONaj8Y Z4Tv2zpXVVo https:/ / github. com/ shumilovas/ med2. git	1С: Программный отбор элементов справочника по группе Maks 22.03.2026 Установка программного отбора элементов справочника "Номенклатура" из модуля формы документа. В качестве фильтра для отбора справочника служит группа номенклатуры. Отбор по наименованию группы. . .	Как я обхитрил таблицу Word Alexander-7 21.03.2026 Когда мигает курсор у внешнего края таблицы, и нам надо перейти на новую строку, а при нажатии Enter создается новый ряд таблицы с ячейками, то мы вместо нервных нажатий Энтеров мы пишем любые буквы. . .	Krabik - рыболовный бот для WoW 3.3.5a AmbA 21.03.2026 без регистрации и смс. Это не торговля, приложение не содержит рекламы. Выполняет свою непосредственную задачу - автоматизацию рыбалки в WoW - и ничего более. Однако если админы будут против -. . .
1С: Программный отбор элементов справочника по значению перечисления Maks 21.03.2026 Установка программного отбора элементов справочника "Сотрудники" из модуля формы документа. В качестве фильтра для отбора служит значение перечислений. / / Событие "НачалоВыбора" реквизита на форме. . .	Переходник USB-CAN-GPIO Eddy_Em 20.03.2026 Достаточно давно на работе возникла необходимость в переходнике CAN-USB с гальваноразвязкой, оный и был разработан. Однако, все меня терзала совесть, что аж 48-ногий МК используется так тупо: просто. . .	Оттенки серого Argus19 18.03.2026 Оттенки серого Нашёл в интернете 3 прекрасных модуля: Модуль класса открытия диалога открытия/ сохранения файла на Win32 API; Модуль класса быстрого перекодирования цветного изображения в оттенки. . .	SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++ 8Observer8 17.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip

@B@bruych@n1n 0 / 0 / 0 Регистрация: 22.04.2010 Сообщений: 21

	Изменение положения при переходе по внутренней ссылке 21.11.2012, 14:12. Показов 2941. Ответов 6 Метки нет (Все метки) Имеется страница с шапкой, шапка фиксирована, и текстовый блок, который скролится под шапку. При переходе по внутренней ссылке в пределах документа, якорь поднимается до верхней границы экрана, под шапку. Подскажите пожалуйста скрипт, который мог бы исправить этот косяк 0

@B@bruych@n1n 0 / 0 / 0 Регистрация: 22.04.2010 Сообщений: 21
	23.11.2012, 14:48 [ТС]
	manual.rar Архив со страницей и стилями 0