JavaScript программирование →
Мягкий (smooth) cкролл (прокрутка, scroll) окна (блока) при помощи JQuery
function enable_smooth_scroll() {
function filterPath(string) {
return string
.replace(/^\//,'')
.replace(/(index|default).[a-zA-Z]{3,4}$/,'')
.replace(/\/$/,'');
}
var locationPath = filterPath(location.pathname);
var scrollElement = 'html, body';
$('html, body').each(function () {
var initScrollTop = $(this).attr('scrollTop');
$(this).attr('scrollTop', initScrollTop + 1);
if ($(this).attr('scrollTop') == initScrollTop + 1) {
scrollElement = this.nodeName.toLowerCase();
$(this).attr('scrollTop', initScrollTop);
return false;
}
});
$('a[href*=#]').each(function() {
var thisPath = filterPath(this.pathname) || locationPath;
if ( locationPath == thisPath
&& (location.hostname == this.hostname || !this.hostname)
&& this.hash.replace(/#/, '')
) {
if ($(this.hash).length) {
$(this).click(function(event) {
var targetOffset = $(this.hash).offset().top;
var target = this.hash;
event.preventDefault();
$(scrollElement).animate(
{scrollTop: targetOffset},
500,
function() {
location.hash = target;
});
});
}
}
});
}
Что делать с функцией
В html прописываем:
<script>
$(document).ready(function() {
enable_smooth_scroll();
});
</script>
<a href="#fuck">ХУЙ</a>
<div id="fuck"></div> <!-- Размещаем блок в качестве якоря туда, куда нужно крутить. Это не обязательно должен быть div -->
UPD: http://demo.php5.com.ua/smooth-scroll/ добавил демо
--
На правах рекламы: Уроки по фотошоп
--




done
Ну, скажем для моих нужд.
Хочется, чтобы при определённом событии я просто вылывал бы MyFunc(id) — который делал бы мягкий скролл до элемента с этим ID.
дело в том, что если я юзаю ваш код — у меня в адресной строке появляется #хэш — а в моём случае он как раз таки и не нужен.
Уверен, есть готовое решение, но только вот что то с гуглом никак договориться на эту тему не могу — как то не так спрашиваю видимо.
Спасибо.
…
return false;
}
попробуйте так
Давайте так — объясню на пальцах.
при загрузке страницы я хочу чтобы юзер плавно переместился к нужному якорю.
можно в адресной строке передать # — но этобудет неинтересн, хочется мягкого скролла.
как это сделать? )
скрол же «мягкий»
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии. Авторизуйтесь, пожалуйста, или зарегистрируйтесь, если не зарегистрированы.