Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Плавная прокрутка вниз до якоря при окрытии страницы (https://javascript.ru/forum/jquery/70884-plavnaya-prokrutka-vniz-do-yakorya-pri-okrytii-stranicy.html)

Igorsrt 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 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 09.10.2017 17:02

Цитата:

Сообщение от Nexus (Сообщение 466993)
$(window).load(function(){
	if(location.hash.length)
		$('html,body').animate({
			scrollTop:$('[name="'+location.hash.substr(1)+'"]').offset().top
		},300)
});

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

Nexus 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 09.10.2017 17:37

Цитата:

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

ну якорь вот так я указал
<section class="block" id="tovari"></section>

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

Nexus 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);
	};
});

рони 09.10.2017 17:50

Nexus,
Цитата:

Сообщение от Igorsrt
id="tovari"></


Nexus 09.10.2017 17:53

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

Igorsrt 09.10.2017 18:03

Цитата:

Сообщение от Nexus (Сообщение 467002)
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 09.10.2017 20:24

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


Часовой пояс GMT +3, время: 13:12.