Форум

Igorsrt · #1 (**permalink**) 09.10.2017, 16:15

Здравствуйте!
В интернете много вариантов того как сделать плавный скроллинг до якоря... например такой

/* A smooth scroll */
$(function() {
	var menuhe = $('#menu').height(); // высота меню
	var menu = menuhe+20; // прибавляем 20
$("area[href*=#],a[href*=#]:not([href=#]):not([href^='#tab']):not([href^='#quicktab']):not([href^='#pane']):not([href *= '#inline'])").click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top - menu
},1500);
return false;
}
}
});
});

Но они работают, только если нажимать якорную ссылку на этой же страницы.. А мне нужно, что бы прокрутка была при переходе с других страниц. Т.е. при открытии ссылки http://сайт.ru#якорь загружалась сама страница сайта, а затем прокручивалась вниз до нужного блока.

Nexus · #2 (**permalink**) 09.10.2017, 16:21

$(window).load(function(){
	if(location.hash.length)
		$('html,body').animate({
			scrollTop:$('[name="'+location.hash.substr(1)+'"]').offset().top
		},300)
});

Igorsrt · #3 (**permalink**) 09.10.2017, 17:02

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

$(window).load(function(){
	if(location.hash.length)
		$('html,body').animate({
			scrollTop:$('[name="'+location.hash.substr(1)+'"]').offset().top
		},300)
});

У меня этот код работает ровным счетом наоборот сейчас - т.е. страница открывается на якоре а потом прокручивается вверх

Nexus · #4 (**permalink**) 09.10.2017, 17:19

Либо hash, либо якорь криво указываете.

<html>
<head>
<title>Untitled</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(function(){
	var hash='#anchor';
	if(hash.length)
		$('html,body').animate({
			scrollTop:$('[name="'+hash.substr(1)+'"]').offset().top
		},300)
});
</script>
</head>
<body style="padding-bottom:2000px;">
<div style="height:4800px;"></div>
<a name="anchor">Anchor</a>
</body>
</html>

Igorsrt · #5 (**permalink**) 09.10.2017, 17:37

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

Либо hash, либо якорь криво указываете.

ну якорь вот так я указал

<section class="block" id="tovari"></section>

Как что проверить?

Nexus · #6 (**permalink**) 09.10.2017, 17:45

Igorsrt, попробуйте этот код:

$(function(){
	if(location.hash.length){
		var target=$('[name="'+location.hash.substr(1)+'"]');
		if(!target.length)
			target=$(location.hash);
		
		if(target.length)
			$('html,body').animate({
				scrollTop:target.offset().top
			},300);
	};
});

рони · #7 (**permalink**) 09.10.2017, 17:50

Nexus,

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

id="tovari"></

Nexus · #8 (**permalink**) 09.10.2017, 17:53

рони, я видел.
Загуглил, оказывается наименование якоря можно и через id указывать.
Я думал, что имя якоря должно быть всегда в "name" атрибуте.

Igorsrt · #9 (**permalink**) 09.10.2017, 18:03

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

Igorsrt, попробуйте этот код:

$(function(){
	if(location.hash.length){
		var target=$('[name="'+location.hash.substr(1)+'"]');
		if(!target.length)
			target=$(location.hash);
		
		if(target.length)
			$('html,body').animate({
				scrollTop:target.offset().top
			},300);
	};
});

этот код не работает у меня (

Igorsrt · #10 (**permalink**) 09.10.2017, 20:24

хотя нет, вроде даже и работает.. но как-то странновато (может у меня компьютер уже просто тупит)... А как еще скрыть якорь в адресной строке браузера?

Форум

Справочник

Discord чат

Курсы javascript