Question

我正在尝试从导航中顺利滚动到另一个部分。

以下是我正在使用的javascript函数：

<script type="text/javascript">
        function goToByScroll(id){
      // Reove "link" from the ID
              // Scroll
            $('html,body').animate({
                scrollTop: $("#"+id).offset().top},
                'slow');
        }

        $("#nav > ul > li > a").click(function(e) { 
              // Prevent a page reload when a link is pressed
            e.preventDefault(); 
              // Call the scroll function
            goToByScroll($(this).attr("id"));           
        });
    </script>

我的HTML如下：

<div class="module-group right">
     <div class="module left" id="nav">
          <ul class="menu">
                <li class="">
                     <a href="#">
                      Home
                      </a>
                 </li>
                 <li class="">
                      <a id="about" href="#">
                      About Us
                      </a>
                 </li>
           </ul>
      </div>
  </div>

我的部分如下：

 <section id="about">
            <div class="container" id="">
                <div class="row" id="">
                    <div class="col-sm-12">
                        <h4 class="uppercase mb80">About Us</h4>
                        <div class="tabbed-content button-tabs vertical">
                            <ul class="tabs">
                                <li class="active">
                                    <div class="tab-title">
                                        <span>Introduction</span>
                                    </div>
                                    <div class="tab-content">
                                        <h5 class="uppercase">Let's Talk about</h5>
                                        <hr>
                                        <p align="justify">

                                        </p>
                                    </div>
                                </li>
                                <li>
                                    <div class="tab-title">
                                        <span>History</span>
                                    </div>
                                    <div class="tab-content">
                                        <h5 class="uppercase">Our footprints on the sands of time..</h5>
                                        <hr>
                                        <p align="justify">

                                        </p>
                                    </div>
                                </li>
                                <li>
                                    <div class="tab-title">
                                        <span>Mission</span>
                                    </div>
                                    <div class="tab-content">
                                        <h5 class="uppercase">Our Mission</h5>
                                        <hr>
                                        <p align="justify">

                                        </p>
                                    </div>
                                </li>
                                <li>
                                    <div class="tab-title">
                                        <span>Vision</span>
                                    </div>
                                    <div class="tab-content">
                                        <h5 class="uppercase">Our Vision</h5>
                                        <hr>
                                        <p align="justify">

                                        </p>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <!--end of button tabs-->
                    </div>
                </div>
                <!--end of row-->
            </div>
            <!--end of container-->
        </section>

我在调用jquery函数时遇到问题。我查看了其他问题并尝试实施之前给出的答案，但它似乎并不适合我。

Answer 1

将导航链接更改为<a href="about">About Us</a>。

然后将函数调用更改为goToByScroll($(this).attr("href"));

Answer 2

您不能拥有两个具有相同ID的元素。按照预期使用href。

<a href="#about"> About Us </a>

当你阅读点击锚点的hsah时

    function goToByScroll(id){
        $('html,body').animate({
            scrollTop: $(id).offset().top},
            'slow');
    }

    $("#nav > ul > li > a").click(function(e) { 
        e.preventDefault(); 
        goToByScroll(this.hash);           
    });

基本示例：

function goToByScroll(id) {
  $('html,body').animate({
      scrollTop: $(id).offset().top
    },
    'slow');
}

$("#nav > ul > li > a").click(function(e) {
  e.preventDefault();
  goToByScroll(this.hash);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav">
  <ul>
    <li><a href="#about"> About Us </a></li>
    </ul>
  </div>
<div style="height:300px;">x</div>
<div style="height:300px;">x</div>
<div id="about" style="height:300px; border: 1px solid black;">ABOUT</div>
<div style="height:300px;">x</div>

Answer 3

使用href属性存储您需要滚动到的ID。另外，请不要忘记在$(document).ready()中包装javascript，以确保在页面准备好后附加事件处理程序。这是javascript：

$(document).ready(function() {

  function goToByScroll(id){
    $('html,body').animate({
      scrollTop: $(id).offset().top
    }, 'slow');
  }

  $("#nav > ul > li > a").click(function(e) {
    e.preventDefault();
    goToByScroll($(this).attr("href"));
  });
});

在HTML中：

<li class="">
  <a href="#about">
    About Us
  </a>
</li>

Javascript滚动不按预期工作

3 个答案: