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

@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, хотя должен, скорее всего из за ошибок

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .
SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .

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

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

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

Опции темы