Question

我正在寻找一种使用jQuery为按钮添加滚动效果的方法。基本上我有一个div按住按钮就像那样注意：按钮位于p下面，div就位于页面的最顶层，所以它是用户进入页面后看到的第一件事：

<script>
    export default {

        render(createElement) {
            return createElement(
                'div',
                {
                    on: {
                        click: this.clickHandler
                    },

                },
                'Next')
        },

        methods: {

          clickHandler() {
              this.$emit('nextslide');
              console.log('trigger emit');
          },

        },

    }
</script>

我在这样的主要部分有几个部分：

<div id="showcase" class="body body-default">
  <div class="home-showcase-image">
    <div class="content-wrap">
      <h1 class="h-home-header">Welcome</h1>
      <p>
        Corporis justo torquent, gravida phasellus, nec lacinia. Cras ut, viverra suspendisse. Netus sem, placerat turpis, qui ut. A in. Lacinia wisi nobis, nulla purus luctus, id mi fermentum. Et suscipit, nec maecenas, donec risus.
        Corporis justo torquent, gravida phasellus, nec lacinia. Cras ut, viverra suspendisse. Netus sem, placerat turpis, qui ut. A in. Lacinia wisi nobis, nulla purus luctus, id mi fermentum. Et suscipit, nec maecenas, donec risus.
      </p>
      <button type="button" id="readMoreButton" class="read-more-button">Read More</button>
    </div>
  </div>
</div>

基本上点击我希望页面向下滚动到主标签。我试过这样的事情：

<main id="main">
  <!--Section A-->
  <section id="section-a" class="grid">
    //content
  </section>

  <!--Section B-->
  <section id="section-b" class="grid section-b-home-allign">
    //content
  </section>
</main>

然而，没有任何反应。单击按钮后，它将保持在页面顶部。我错过了什么？

任何帮助都会被挪用。谢谢。

Answer 1

您的代码运行正常。请检查此代码。可能你忘了添加Jquery min文件。

＆＃13;

$("#readMoreButton").click(function () {
    $('html, body').animate({
        scrollTop: $("#main").offset().top
    });
});

＆＃13;

#showcase{
  min-height: 700px;
}
.grid{
  min-height:600px;
  margin: 15px 0;
  background: #ccc;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="showcase" class="body body-default">
            <div class="home-showcase-image">
                <div class="content-wrap">
                    <h1 class="h-home-header">Welcome</h1>

                    <p>
                        Corporis justo torquent, gravida phasellus, nec lacinia. Cras ut, viverra suspendisse. Netus sem,
                        placerat turpis, qui ut. A in. Lacinia wisi nobis, nulla purus luctus, id mi fermentum. Et suscipit,
                        nec maecenas, donec risus.
                        Corporis justo torquent, gravida phasellus, nec lacinia. Cras ut, viverra suspendisse. Netus sem,
                        placerat turpis, qui ut. A in. Lacinia wisi nobis, nulla purus luctus, id mi fermentum. Et suscipit,
                        nec maecenas, donec risus.
                    </p>

                    <button type="button" id="readMoreButton" class="read-more-button">Read More</button>
                </div>
            </div>
        </div>
        
        <main id="main">

            <!--Section A-->
            <section id="section-a" class="grid">
               //content
            </section>

            <!--Section B-->
            <section id="section-b" class="grid section-b-home-allign">
               //content
            </section>
</main>

＆＃13;

Answer 2

听起来你的代码中没有包含jQuery。这是$未定义的唯一原因。

包含它的最简单方法是在脚本中的代码之前链接到CDN。您可以在此处找到所需链接列表：

https://code.jquery.com

在按钮上单击jQuery，向下滚动到<main>

2 个答案: