jquery動畫滾動不起作用

Question

我想用按鈕制作滾動效果到我的內容。 也許任何人都可以修復我的代碼並解釋為什么它不起作用？ 謝謝 ！

這是我的HTML：

<div class="main">
<section class="section home">
    <header>
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12">
                <h1>Home</h1>
            </div>
            <a href="#home-content" class="scroll">BUTTON</a>
        </div>
    </header>
    <div class="content" id="home-content">
        <p>
            My content
        </p>
    </div>
</section>
</div>

我的js文件：`

function scrollDown () {
        $('a[href="scroll"]').click(function(event) {
            event.preventDefault();
            var targetOffset = $('a[class="content"]').offset().top;
            $('.main').animate({
                scrollTop: targetOffset
            },1000);

        }); 
    }

`

Answer 1

這是一個演示，演示如何使按鈕在按下時將窗口向下滾動到您的內容。 它會為您的內容添加一個margin-top，將其推到視口底部以下，以便它可以展示滾動操作。

為了使它工作，我需要刪除你的scrollDown函數，更改你的一些jQuery選擇器，並在html, body上為scrollTop設置動畫。

現場演示：

 $('a.scroll').click(function(event) { event.preventDefault(); var targetOffset = $('div.content').offset().top; $("html, body").animate({ scrollTop: targetOffset + "px" },1000); }); 

 .content { margin-top: 500px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="main"> <section class="section home"> <header> <div class="row"> <div class="col-lg-12 col-md-12 col-sm-12"> <h1>Home</h1> </div> <a href="#home-content" class="scroll">BUTTON</a> </div> </header> <div class="content" id="home-content"> <p> My content </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu aliquam sapien, nec accumsan odio. Nunc ac purus accumsan augue sodales malesuada ut at ipsum. Curabitur volutpat et risus ut ultrices. Fusce ante sapien, laoreet non scelerisque nec, elementum et nisl. Curabitur pharetra a sapien ac convallis. Aliquam dapibus viverra sem a lacinia. Proin tempor orci nec massa feugiat, ac tristique tellus convallis. </p> </div> </section> </div> 

JSFiddle版本： https ：//jsfiddle.net/vhaye0c0/1/