Question

我正在尝试使用我的博客滚动到顶部动画，http://goneintranslation.blogspot.ca使用主页链接并在底部。我想我在这里有正确的编码JSFiddle

我在线阅读了你，但是＆lt;之前的jQuery代码/头＆GT; HTML代码中的代码

所以这就是我所做的，我在脚本标签中插入了jQuery代码并在＆lt;之前粘贴了这段代码。 /头＆GT;在我的HTML中标记。保存我的代码后，滚动到顶部动画不起作用。我究竟做错了什么？我在线阅读你必须引用你的脚本标签或什么？如果这是我的错误，我如何引用我的脚本标签或什么是我的脚本标签的引用？

非常感谢

<script>
  
  $('.home-link').on('click', function(){
    $("body").animate({ scrollTop: 0 }, 1000);
}); 

</script>

Answer 1

我在jsfiddle中看到了你的html代码：

  <div class='mobile-link-button' id='blog-pager-home-link'> <div class="test">
TOP
  </div>

  <a class='home-link' expr:href='data:blog.homepageUrl' value="go to top">Go to top</a>
</div>

请将链接更改为：

<a class='home-link' href='#'>Go to top</a>

Answer 2

尝试将其包装在ready函数中并确保包含jquery，

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $('.home-link').on('click', function(){
        $("body").animate({ scrollTop: 0 }, 1000);
    }); 
});
</script>

Answer 3

您不需要在<head></head>中包含上面的代码，您可以在</body>标记之前的页面底部添加代码，您读到的关于添加jquery的内容是关于您将要使用的jquery库的链接。

请参阅下面的基本页面设置

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css"/>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
        <!-- and the rest of your resource links -->
    </head>
    <body>

        <header>
            <!-- your header html in here -->
        </header>

        <content>

            <!-- 
                where all your main content is 
                with the images and text that is 
                displayed on your page
            -->

            <!-- under all your main content at the bottom add your button/link to scroll back to the top -->
            <a href="#" class="home-link">Scroll To Top</a>

        </content>

        <footer>
            <!-- your footer html in here -->
        </footer>

        <!-- now add your javascript/jquery functions -->
        <script>
        $('.home-link').on('click', function(){
            $("body").animate({ scrollTop: 0 }, 1000);
        }); 
        </script>
    </body>

</html>

有很多资源可以阅读和了解所有这些内容，例如w3schools以及免费在线网站，以了解codeacademy等代码

希望这会有所帮助。

插入jQuery代码

3 个答案: