Плавная прокрутка вниз до якоря при окрытии страницы
Здравствуйте!
В интернете много вариантов того как сделать плавный скроллинг до якоря... например такой
/* 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#якорь загружалась сама страница сайта, а затем прокручивалась вниз до нужного блока. |
$(window).load(function(){
if(location.hash.length)
$('html,body').animate({
scrollTop:$('[name="'+location.hash.substr(1)+'"]').offset().top
},300)
});
|
Цитата:
|
Либо 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>
|
Цитата:
<section class="block" id="tovari"></section> Как что проверить? |
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);
};
});
|
Nexus,
Цитата:
|
рони, я видел.
Загуглил, оказывается наименование якоря можно и через id указывать. Я думал, что имя якоря должно быть всегда в "name" атрибуте. |
Цитата:
|
хотя нет, вроде даже и работает.. но как-то странновато (может у меня компьютер уже просто тупит)... А как еще скрыть якорь в адресной строке браузера?
|
Igorsrt,
Один из моих старых плагинов - https://github.com/rasy-js/anchormenu, возможно подойдет. Внутри демка. |
Цитата:
|
Цитата:
Только у меня теперь новая проблема по этой же задаче: Ссылка http://сайт.ru/#tovari работает, но она еще, как оказалось, может принимать вид типа http://сайт.ru/#tovari/#1?utm_source=yandex&utm_medium=cpc&utm_campaign=a vito_3&utm_content={ad_id}&utm_term={keyword}®ion ={region_id}®ion_name={region_name}&block={positi on_type}&position={position} и тогда не срабатывает... Как этот хвост убрать или не учитывать? |
Вопрос с "хвостом" так и не решил - прокрутки по ссылкам вида http://сайт.ru/#tovar1?utm_source=yandex&utm_medium=cpc&utm_campa ign=avito_1&utm_content={ad_id}&utm_term={keyword} ®ion={region_id}®ion_name={region_name}&sour ce_type={source_type}&source={source} нет...
Как этот хвост не учитывать? |
Igorsrt, откуда у вас такие ссылки?
hash должен идти после get-параметров. Цитата:
|
Цитата:
|
| Часовой пояс GMT +3, время: 03:11. |