Fatal编程技术网
  • jquery/
  • Jquery 脚本不遵守ScrollTop持续时间

Jquery 脚本不遵守ScrollTop持续时间

jquery scroll

Jquery 脚本不遵守ScrollTop持续时间,jquery,scroll,jquery-animate,scrolltop,duration,Jquery,Scroll,Jquery Animate,Scrolltop,Duration,我的代码中有一个bug 我的scrollTop正在工作，但没有它的持续时间效果 单击滚动链接确实会触发偏移量的更改，但它是立即完成的，而不是我给出的持续时间1000 非常感谢您以后的帮助， 这是我的密码 <!DOCTYPE html> <head> <body class="demo-2"> <main> <header class="codrops-header"> <div

我的代码中有一个bug

我的scrollTop正在工作，但没有它的持续时间效果

单击滚动链接确实会触发偏移量的更改，但它是立即完成的，而不是我给出的持续时间1000

非常感谢您以后的帮助， 这是我的密码

<!DOCTYPE html>
<head>

<body class="demo-2">

    <main>
        <header class="codrops-header"> 
            <div class="logo">
                <img src="img/logo.png" alt="LOGO" style="width: 100%; height: auto;">
                <h1 style="text-align: center;">Votre Fleuriste à Montmartre</h1>
            </div>              
        </header>
        <!-- Initial markup -->
        <div class="segmenter" style="background-image: url(img/MUSE-01-BIS1.jpg)">             
        </div>

        <h2 class="trigger-headline trigger-headline--hidden"><span>m</span><span>u</span><span>s</span><span>e</span></h2>
        <div class="bottom-nav">
            <button class="btn btn--trigger">Voir plus</button>
        </div>

        <div class="scroll-to scroll-hidden">

        </div>

        <div class="infos infos-hidden" id="infos"> 

            <div class="infos-container">

            </div>
        </div>

    </main>



    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="js/anime.min.js"></script>
    <script src="js/imagesloaded.pkgd.min.js"></script>
    <script src="js/main.js"></script>
    <script>
    $(document).ready(function() {
        var headline = document.querySelector('.trigger-headline'),
            trigger = document.querySelector('.btn--trigger'),
            header = document.querySelector('.codrops-header'),
            infos = document.querySelector('.infos'),
            scroll = document.querySelector('.scroll-to'),
            segmenter = new Segmenter(document.querySelector('.segmenter'), {
                pieces: 4,
                animation: {
                    duration: 1500,
                    easing: 'easeInOutExpo',
                    delay: 100,
                    translateZ: 100
                },
                parallax: true,
                positions: [
                    {top: 0, left: 0, width: 45, height: 45},
                    {top: 55, left: 0, width: 45, height: 45},
                    {top: 0, left: 55, width: 45, height: 45},
                    {top: 55, left: 55, width: 45, height: 45}
                ],
                onReady: function() {
                    trigger.classList.remove('btn--hidden');
                    trigger.addEventListener('click', function() {
                        segmenter.animate();
                        headline.classList.remove('trigger-headline--hidden');
                        header.classList.add('hidden-header');
                        scroll.classList.remove('scroll-hidden');
                        $('.scroll-to').html('<a href="#infos">Scroll</a>');
                        infos.classList.remove('infos-hidden');
                        infos.classList.add('infos-flex');
                        header.classList.remove('codrops-header');
                        this.classList.add('btn--hidden');
                    });
                }
            });


        $('a[href*="#"]:not([href="#"])').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
              }, 1000);
              return false;
            }
          }
        });
    }); 

    </script>

    <script>

    </script>

</body>


蒙马特之旅
缪斯
Voir plus
$（文档）.ready（函数（）{
var headline=document.querySelector（“.trigger headline”），
触发器=document.querySelector（'.btn--trigger'），
header=document.querySelector（'.codrops header'），
infos=document.querySelector（'.infos'），
scroll=document.querySelector（'.scroll to'），
分段器=新分段器（document.querySelector（'.segmenter'）{
作品：4，
动画：{
持续时间：1500，
轻松：“易趣博览”，
延误：100，
翻译Z:100
},
视差：对，
职位：[
{顶部：0，左侧：0，宽度：45，高度：45}，
{顶部：55，左侧：0，宽度：45，高度：45}，
{顶部：0，左侧：55，宽度：45，高度：45}，
{顶部：55，左侧：55，宽度：45，高度：45}
],
onReady:function（）{
trigger.classList.remove（'btn--hidden'）；
trigger.addEventListener（'click'，function（）{
segmenter.animate（）；
headline.classList.remove（'trigger-headline--hidden'）；
header.classList.add（'hidden-header'）；
scroll.classList.remove（'scroll-hidden'）；
$（''。滚动至''.html（''）；
移除（'infos-hidden'）；
add（'infos-flex'）；
header.classList.remove（'codrops-header'）；
this.classList.add（'btn--hidden'）；
});
}
});
$（'a[href*=“#”]：不是（[href=“#”]”）。单击（函数（）{
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（目标长度）{
$（'html，body'）。设置动画({
scrollTop:target.offset（）.top
}, 1000);
返回false；
}
}
});
});

我尝试了这个，我的所有项目：

scrollToWeb: function()
{
    var objectScroll = $(".scrollToWeb");

    if(objectScroll.length <= 0) return false;

    $(".scrollToWeb").click(function(e){
        e.preventDefault();
        var objectHref = $(this).attr("href").replace(strHOST , ''),
            objectId = $(this).attr("id");

        if( $('#'+objectId).length <= 0) return true;

        $('#'+objectId).addClass('active');

        var target = objectHref,
        $target = $(target);

        $('html, body').stop().animate({
            'scrollTop': $target.offset().top
        }, 1500, 'swing');
    });
}

scrollToWeb:function（）
{
var objectScroll=$（“.scrollToWeb”）；
if（objectScroll.length）