text smoth卷轴
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了text smoth卷轴相关的知识,希望对你有一定的参考价值。
$(document).ready(function () {
/* ============================================================================
* прокрутка до верха страницы
* ============================================================================ */
$("a.scrolltop").click(function () {
var elementClick = $(this).attr("href");
var destination = $(elementClick).offset().top;
jQuery("html:not(:animated),body:not(:animated)").animate({
scrollTop: destination
}, 800);
return false;
});
});
//добавить ссылке класс scrolltop и href="#exampleInputEmail1" до которого подойти
********************************************************************************************************
В скрипте можно указать скорость прокрутки до якоря var t = 1000;, меняем 1000 на нужное нам значение, 1000 равно 1 секунде.
Скрипт плавной прокрутки также будет работать не только при нажатие на ссылку, можно добавить любому блоку атрибут data-href="#idBlock" и тогда при клике на данный блок произойдет плавная прокрутка до якоря, как и по ссылке.
то бы прокрутка происходила не до якоря, а скажем на 100px выше него
$('html,body').stop().animate({ scrollTop: $(d).offset().top - 100 }, t);
$(document).ready(function () {
/* ============================================================================
* прокрутка до id
* ============================================================================ */
$('a[href^="#"], *[data-href^="#"]').on('click', function (e) {
e.preventDefault();
var t = 1000;
var d = $(this).attr('data-href') ? $(this).attr('data-href') : $(this).attr('href');
$('html,body').stop().animate({
scrollTop: $(d).offset().top
}, t);
});
});
***********************************
в wordpress лендинге при якорях не на всех страницах
$('a[href^="#"], *[data-href^="#"]').on('click', function (e) {
e.preventDefault();
var t = 1000;
var d = $(this).attr('data-href') ? $(this).attr('data-href') : $(this).attr('href');
//console.log(e.currentTarget.attributes[0].nodeValue);
if (e.currentTarget.attributes[0].nodeValue === '#wieman') {
if ($('section').hasClass('main-page-wieman')) {
$('html,body').stop().animate({
scrollTop: $(d).offset().top
}, t);
} else {
window.location.href = '/' + d;
}
}
if (e.currentTarget.attributes[0].nodeValue === '#tocalendar' || e.currentTarget.attributes[0].nodeValue === '#beratungs') {
if ($('form').hasClass('calendar-consultations-form')) {
$('html,body').stop().animate({
scrollTop: $(d).offset().top
}, t);
} else {
window.location.href = '/' + d;
}
}
if (e.currentTarget.attributes[0].nodeValue === '#unserekompetenzen') {
if ($('div').hasClass('main-page__kompetenzen-items-wrapper')) {
$('html,body').stop().animate({
scrollTop: $(d).offset().top
}, t);
} else {
window.location.href = '/' + d;
}
} else {
$('html,body').stop().animate({
scrollTop: $(d).offset().top
}, t);
}
});
==================================================
прокрутка до блока
$('html, body').animate(
{
scrollTop: $(accordeonEvent.target).parent().offset().top
},
'slow'
);
以上是关于text smoth卷轴的主要内容,如果未能解决你的问题,请参考以下文章