Прокрутка на определённую высоту при клике

@zoomcool7 · Регистрация: 10.10.2014

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

Прошу помощи.
Есть шапка в 490px, в ней, внизу, меню, а далее, ниже идёт страница сайта, которую не видно.
Нужно, чтобы при клике на пункт меню, страница прокручивалась на 490px.
Чтобы меню оказалось сверху, и видно страницу.

Элемент меню #sdt_menu > li

Пользуюсь таким скриптом, но после того как покрутился, он сразу возвращается в исходное состояние.

JavaScript
1
2
3
4
5
jQuery(document).ready(function(){
    jQuery('#sdt_menu > li').click(function() {
        window.scrollTo( 0, 490 );
    });
});

@Lazy_Den · 10.10.2014, 23:39

Смотрите такой вариант. Селекторы, разумеется, что пропишите свои.

JavaScript
1
2
3
4
5
6
7
var nav = $('nav');
$('a', nav).on('click', function(e){
    e.preventDefault();
    $('html, body').animate({
        scrollTop: nav.offset().top
    }, 1000);
});

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

@zoomcool7 · 11.10.2014, 10:33 **[ТС]**

Большое спасибо, работает, единственное, когда нажимаешь на пункты меню, не загружаются страницы, которые привязаны к пунктам. Не могу понять почему?

Добавлено через 7 минут
А ещё, как сделать так, чтобы страница опускалась именно на определённую высоту в пикселях?

Добавлено через 13 минут
Сделал так:

JavaScript
1
2
3
4
5
var nav = $('nav');
$('a', nav).on('click', function(e){
    e.preventDefault();
    window.scrollTo( 0, 400 );
});

Но проблема с тем, что не грузит страницы по ссылкам в меню, актуальна.

Добавлено через 8 минут
Мне кажется дело в preventDefault, но не могу понять, как исправить.

@Lazy_Den · 11.10.2014, 12:11

Сообщение от zoomcool7

Но проблема с тем, что не грузит страницы по ссылкам в меню

Я же вам об этом и писал выше. Если вы не подгружаете контент страницы с помощью Ajax, а ссылки работают как обычно - по клику идёт переход, страница перезагружается полностью - то решать вашу задачу нужно по другому. Например, проверять URL и, если адрес соответствует определенным условиям, то после загрузки страницы, прокручивать на уровень меню. В других же случаях - оставлять как есть.

@zoomcool7 · 11.10.2014, 14:25 **[ТС]**

Не могли бы вы написать мне правильный код, готов 100 рублей на телефон кинуть)

Есть меню

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

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
71
72
<ul id="sdt_menu" class="sdt_menu">
 <li>
 <a href="$HOME_PAGE_LINK$">
 <img src="http://fitswim.ucoz.ru/images/2.jpg" alt=""/>
 <span class="sdt_active"></span>
 <span class="sdt_wrap">
 <span class="sdt_link">Обо мне</span>
 <span class="sdt_descr">Личный тренер</span>
 </span>
 </a>
 </li>
 <li>
 <a href="http://fitswim.ucoz.ru/index/sportivnoe_plavanie/0-4">
 <img src="http://fitswim.ucoz.ru/images/1.jpg" alt=""/>
 <span class="sdt_active"></span>
 <span class="sdt_wrap">
 <span class="sdt_link">Спортивное плавание</span>
 <span class="sdt_descr">My work</span>
 </span>
 </a>
 <div class="sdt_box">
 <a href="#">Websites</a>
 <a href="#">Illustrations</a>
 <a href="#">Photography</a>
 </div>
 </li>
 <li>
 <a href="http://fitswim.ucoz.ru/index/akvafitnes/0-5">
 <img src="http://fitswim.ucoz.ru/images/3.jpg" alt=""/>
 <span class="sdt_active"></span>
 <span class="sdt_wrap">
 <span class="sdt_link">Аквафитнес</span>
 <span class="sdt_descr">Where ideas get born</span>
 </span>
 </a>
 </li>
 <li>
 <a href="http://fitswim.ucoz.ru/index/reabilitacija/0-6">
 <img src="http://fitswim.ucoz.ru/images/4.jpg" alt=""/>
 <span class="sdt_active"></span>
 <span class="sdt_wrap">
 <span class="sdt_link">Реабилитация</span>
 <span class="sdt_descr">I like to photograph</span>
 </span>
 </a>
 </li>
 <li>
 <a href="http://fitswim.ucoz.ru/index/dajving/0-7">
 <img src="http://fitswim.ucoz.ru/images/5.jpg" alt=""/>
 <span class="sdt_active"></span>
 <span class="sdt_wrap">
 <span class="sdt_link">Дайвинг</span>
 <span class="sdt_descr">I write about design</span>
 </span>
 </a>
 </li>
 <li>
 <a href="#">
 <img src="http://fitswim.ucoz.ru/images/6.jpg" alt=""/>
 <span class="sdt_active"></span>
 <span class="sdt_wrap">
 <span class="sdt_link">Новости</span>
 <span class="sdt_descr">I like to code</span>
 </span>
 </a>
 <div class="sdt_box">
 <a href="#">Job Board Website</a>
 <a href="#">Shopping Cart</a>
 <a href="#">Interactive Maps</a>
 </div>
 </li>
 </ul>

И классы

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

CSS
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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
ul.sdt_menu{
 margin:0;
 padding:0;
 list-style: none;
 font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
 font-size:14px;
 width:1020px;
 
}
ul.sdt_menu a{
 text-decoration:none;
 outline:none;
}
ul.sdt_menu li{
 float:left;
 width:170px;
 height:85px;
 position:relative;
 cursor:pointer;
}
ul.sdt_menu li > a{
 position:absolute;
 top:0px;
 left:0px;
 width:170px;
 height:85px;
 z-index:12;
 background: #111;
 -moz-box-shadow:0px 0px 2px #000 inset;
 -webkit-box-shadow:0px 0px 2px #000 inset;
 box-shadow:0px 0px 2px #000 inset;
}
ul.sdt_menu li a img{
 border:none;
 position:absolute;
 width:0px;
 height:0px;
 bottom:0px;
 left:85px;
 z-index:100;
 -moz-box-shadow:0px 0px 4px #000;
 -webkit-box-shadow:0px 0px 4px #000;
 box-shadow:0px 0px 4px #000;
}
ul.sdt_menu li span.sdt_wrap{
 position:absolute;
 top:25px;
 left:0px;
 width:170px;
 height:60px;
 z-index:15;
}
ul.sdt_menu li span.sdt_active{
 position:absolute;
 background:#111;
 top:85px;
 width:170px;
 height:0px;
 left:0px;
 z-index:14;
 -moz-box-shadow:0px 0px 4px #000 inset;
 -webkit-box-shadow:0px 0px 4px #000 inset;
 box-shadow:0px 0px 4px #000 inset;
}
ul.sdt_menu li span span.sdt_link,
ul.sdt_menu li span span.sdt_descr,
ul.sdt_menu li div.sdt_box a{
 margin-left:15px;
 text-transform:uppercase;
 text-shadow:1px 1px 1px #000;
}
ul.sdt_menu li span span.sdt_link{
 color:#fff;
 font-size:18px;
 float:left;
 clear:both;
}
ul.sdt_menu li span span.sdt_descr{
 color:#0B75AF;
 float:left;
 clear:both;
 width:155px; /*For dumbass IE7*/
 font-size:10px;
 letter-spacing:1px;
}
ul.sdt_menu li div.sdt_box{
 display:block;
 position:absolute;
 width:170px;
 overflow:hidden;
 height:170px;
 top:85px;
 left:0px;
 display:none;
 background:#000;
 z-index: 10;
}
ul.sdt_menu li div.sdt_box a{
 float:left;
 clear:both;
 line-height:30px;
 color:#0B75AF;
}
ul.sdt_menu li div.sdt_box a:first-child{
 margin-top:15px;
}
ul.sdt_menu li div.sdt_box a:hover{
 color:#fff;
}

От верха до меню 490x, там рекламная информация, и получается внизу меню торчит, а далее контент, который не видно, пока не проскролишь. А нужно, чтобы при клике на меню, страница опускалась на 400px. Чтобы текст контента увидеть.

http://fitswim.ucoz.ru/

@Lazy_Den · 11.10.2014, 14:58

Сообщение от zoomcool7

готов 100 рублей на телефон кинуть

Такие бешеные деньги, у меня рука не поднимется взять.

Пробуйте так сделать:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var nav = $('nav');
function preloadScroll(ls){
    if(ls !== null){
        $('html, body').animate({
            scrollTop: nav.offset().top
        }, 1000);
        localStorage.removeItem('scrollto');
    }
    return false;
}
function setScroll(){
    localStorage.setItem('scrollto', 1);
}
preloadScroll( localStorage.getItem('scrollto') );
$('a', nav).on('click', setScroll);

Добавлено через 8 минут
P.S. В первой строке измените на:

JavaScript
1
var nav = $('#sdt_menu');

@zoomcool7 · 11.10.2014, 16:55 **[ТС]**

Я очень вам благодарен! Всё работает. Но, в идеале, сделать так, чтобы прокручивалось на 400px, поскольку в меню появляются картинки при наводке, и они не видны, если всё опускается до линни меню.

Нужно что-то вроде этого наверно, только при клике на меню.

JavaScript
1
2
3
4
window.onload = function()
{
window.scrollTo( 0, 400 );
}

@Lazy_Den · 11.10.2014, 17:14

Сообщение от zoomcool7

Но, в идеале, сделать так, чтобы прокручивалось на 400px

Вместо nav.offset().top написать 400

@zoomcool7 · 11.10.2014, 17:40 **[ТС]**

Спасибо! А реально сделать так, чтобы после первого перехода по ссылке в меню, и опускания, страницы грузились уже, с уровня 400px, при дальнейшем использовании меню?

@Lazy_Den · 11.10.2014, 18:06

Сообщение от zoomcool7

А реально сделать так, чтобы ...

Реально. Вместо LocalStorage используете cookie, где для expire установить "0". При первом заходе пишем в печеньку метку, на которую ориентируемся при переходах по ссылкам.

@zoomcool7 · 11.10.2014, 19:24 **[ТС]**

Если бы я знал язык java script, это было бы может и реально)

@Lazy_Den · 11.10.2014, 19:45

Сообщение от zoomcool7

Если бы я знал язык java script

Я тоже не асс, но если бы перешли по ссылке, которую я вам дал выше, то всё бы легко нашли.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var nav = $('#sdt_menu');
function getCookie(name) {
  var re = /([\.$?*|{}\(\)\[\]\\\/\+^])/g,
      matches = document.cookie.match(new RegExp(
          "(?:^|; )" + name.replace(re, '\\$1') + "=([^;]*)"
          ));
  return matches ? decodeURIComponent(matches[1]) : undefined;
}
function checkCookie(vis){
    if(typeof vis != 'undefined'){
        $(window).scrollTop(400);
    }
    return false;
}
function setCookie(){
    document.cookie = 'visit=1; path=/;';
}
checkCookie( getCookie('visit') );
$('a', nav).on('click', setCookie);

@zoomcool7 · 11.10.2014, 20:14 **[ТС]**

Я перешёл, но там какие-то загагулины страшные написаны)

Что-то не работает, ничего не происходит вообще(

@Lazy_Den · 11.10.2014, 20:39

Сообщение от zoomcool7

Что-то не работает

Весь JS-код оберните в DOM-Ready:

JavaScript
1
2
3
$(function(){
    // тут весь код
});

@zoomcool7 · 11.10.2014, 20:45 **[ТС]**

Заработало, но теперь страница в первый раз грузится уже с опуском в 400px(

@Lazy_Den · 11.10.2014, 20:47

Сообщение от zoomcool7

но теперь страница в первый раз грузится уже с опуском в 400px

Закройте браузер и откройте еще раз - будет без прокрутки. Когда хоть один раз кликните по ссылке меню, то уже будет с прокруткой.

@zoomcool7 · 12.10.2014, 14:43 **[ТС]**

Спасибо за помощь! Я очень благодарен! Всё работает!

Новые блоги и статьи Все статьи Все блоги /
Модель заражения группы наркоманов alhaos 17.04.2026 Условия задачи сформулированы тут Суть: - Группа наркоманов из 10 человек. - Только один инфицирован ВИЧ. - Колются одной иглой. - Колются раз в день. - Колются последовательно через. . .	Мысли в слух. Про "навсегда". kumehtar 16.04.2026 Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .	My Business CRM MaGz GoLd 16.04.2026 Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .	Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.
Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .	Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .	Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .

@zoomcool7 1 / 1 / 0 Регистрация: 10.10.2014 Сообщений: 11
	11.10.2014, 17:40 [ТС]
	Спасибо! А реально сделать так, чтобы после первого перехода по ссылке в меню, и опускания, страницы грузились уже, с уровня 400px, при дальнейшем использовании меню? 0

@zoomcool7 1 / 1 / 0 Регистрация: 10.10.2014 Сообщений: 11
	11.10.2014, 19:24 [ТС]
	Если бы я знал язык java script, это было бы может и реально) 0

@zoomcool7 1 / 1 / 0 Регистрация: 10.10.2014 Сообщений: 11
	11.10.2014, 20:14 [ТС]
	Я перешёл, но там какие-то загагулины страшные написаны) Что-то не работает, ничего не происходит вообще( 0

@zoomcool7 1 / 1 / 0 Регистрация: 10.10.2014 Сообщений: 11
	11.10.2014, 20:45 [ТС]
	Заработало, но теперь страница в первый раз грузится уже с опуском в 400px( 0

@zoomcool7 1 / 1 / 0 Регистрация: 10.10.2014 Сообщений: 11
	12.10.2014, 14:43 [ТС]
	Спасибо за помощь! Я очень благодарен! Всё работает! 0

Прокрутка на определённую высоту при клике

Решение