Question

我的代码中有一个错误。

我的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>

Answer 1

我试过这个，我的所有项目：

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');
    });
}

ScrollTop持续时间不受脚本限制

1 个答案: