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

a.r.akhmadullin · 03.04.2019, 07:33

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

Возникла проблема с точным переходом по якорю с использованием 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>

03.04.2019, 07:33	#1
a.r.akhmadullin Новичок Джуниор Регистрация: 03.04.2019 Сообщений: 1	Плавный переход к якорю внутри 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> Последний раз редактировалось Аватар; 03.04.2019 в 08:16.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
помогите сделать плавный переход на Jquery	Jinna	JavaScript, Ajax	12	27.09.2018 00:19
Position: fixed - сделать размеры блока как у body	mr.relax	HTML и CSS	2	11.02.2018 13:10
Плавный переход к метке jQuery 1.9.1	patch	JavaScript, Ajax	3	06.06.2013 20:16
плавный смещение блока	Student1992	JavaScript, Ajax	3	15.11.2011 16:58
Плавный переход между картинками	ZvEr_HaCkEr	Мультимедиа в Delphi	11	03.06.2011 02:39