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卷轴的主要内容,如果未能解决你的问题,请参考以下文章

javascript smoth滚动到部分

smoth字体大小

smoth movig背景IE改编

83JS原生:圣旨卷轴展开效果

上古卷轴5代码

上古卷轴5空酒瓶代码