Плавный переход к якорю внутри DIV блока. Не HTML, не BODY / HTML, JavaScript, VBScript, CSS

ReSQL.ru

2.0.59

Планшетная версия Контакт Правила FAQ Помощь

Гость

Войти | Профиль | Очистить

Нов. | Гор. | Избр.

Написать

Автор*:

Ввести пароль для входа

Тема*:

Сообщение

Данное сообщение тематическое

Сообщение содержит картинки или видео 18+

Автор:

ВНИМАНИЕ! На данном подфоруме действуют строгие правила. Удостоверьтесь, что ваше сообщение соответствует им!

Форум или тема закрыты для гостей. Необходима авторизация!

Загрузить последнюю сохраненную версию

Вставить как галерею

Максимальный размер вложений: 4,0 МБ, аудио/видео: 8,0 МБ. Картинки большего размера ужимаются, если возможно.

Введите код, изображенный на картинке. Если код нечитаемый, кликните картинку, чтобы загрузить другой вариант.

Отправляя сообщение, я выражаю свое согласие с правилами форума и принимаю пользовательское соглашение.

Действия ...

Доб. в избранное
Игнор. тему
Прикреп. тему
Пометить прочит. / непрочит.
Фильтр:
Сообщения автора темы
Сообщение содержит вложения
Сообщение содержит картинки
Сообщение содержит видеоклипы
Сообщение содержит аудиоклипы
Сообщение содержит картинки или видео 18+

Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Плавный переход к якорю внутри DIV блока. Не HTML, не BODY / 1 сообщений из 1, страница 1 из 1

03.04.2019, 07:29

#39795483

a.r.akhmadullin

Гость

Плавный переход к якорю внутри DIV блока. Не HTML, не BODY

Здравствуйте!

Возникла проблема с точным переходом по якорю с использованием jQuery. Если я проматываю до самого верха и нажимаю ссылку "ВНИЗ", то якорь оказывается где-то выше верхней границы, если немного вниз проматываю, так что ссылка "ВНИЗ" оказывается вверху и нажимаю на нее, то якорь оказывается ниже верхней границы. Подскажите пожалуйста как изменить код чтобы якорь всегда на верхней границе оказывался? Код который я использую:
<html>
<head>
<title>testscrolling</title>
<script type="text/javascript" src=" https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('a[href^="#"]').on('click', function(event) {
event.preventDefault();
var sc = $(this).attr("href"),
//dn = $(sc).offset().top;
dn = $(sc).position().top;
$('div').animate({scrollTop: dn}, 1000);
});
});
</script>
</head>
<body style='overflow-y: none;'>
<div style='height: 100%;margin: 10px auto;overflow-y: none;'>
<div style='height: 20%; width: 100%; background: #ffff00'>

</div>
<div style='background: #00ffff; overflow-y: scroll; height: 60%'>
<a id="up"></a>
<?php for($i = 0; $i < 10; $i++) echo "<p>test</p>"?>
<p><a href="#down" style='background: #FF0000'>ВНИЗ</a></p>
<?php for($i = 0; $i < 890; $i++) echo "<p>test</p>"?>
<a id="down"></a>
<p><a href="#up" style='background: #FF0000'>ВВЕРХ</a></p>
<?php for($i = 0; $i < 100; $i++) echo "<p>test</p>"?>
</div>
<div style='height: 20%; width: 100%; background: #ffff00'>

</div>
</div>
</body>
</html>

...

Рейтинг:

0 / 0

| Ответить | Цитировать | Написать

Читали тему (0):

Читали форум (0):

Пользователи онлайн (0):

start [/forum/topic.php?fid=22&mobile=1&tid=1443821]:	0ms
get settings:	9ms
get forum list:	12ms
check forum access:	3ms
check topic access:	3ms
track hit:	156ms
get topic data:	13ms
get forum data:	3ms
get page messages:	30ms
get tp. blocked users:	2ms
others:	15ms

total:	246ms