Question

我正在将2个html文件添加到我的一页滚动站点（index.html）。我的导航栏（引导程序）出现问题。当单击“常见问题”的“预订表单”时，由于所包含的index.html上的滚动功能，该页面没有转移到所选的html文件中。我该如何解决？

我尝试将类添加到＃home，＃service，＃corporate和#contact链接，并将相同的类添加到“ navbar a”后面的Jquery函数中。它可以那样工作，但是在index.html上的滚动消失了。

index.html导航栏：

<body data-spy="scroll" data-offset="80">
  <div id="nav" class="navbar navbar-default navbar-fixed-top menu-top">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a href="index.html" class="navbar-brand">LOGO</a>
          </div>
          <div class="navbar-collapse collapse">
            <nav>
              <ul class="nav navbar-nav navbar-right">
                <li class="active"><a class="page-scroll" href="#home">Home</a></li>
                <li><a class="page-scroll" href="#service">Services</a></li>
                <li><a class="page-scroll" href="#corporate">Corporate</a></li>
                <li><a class="page-scroll" href="#contact">Contact</a></li>
                <li><a href="bookingform.html">Booking Form</a></li>
                <li><a href="faqs.html">FAQ</a></li>
              </ul>
            </nav>
          </div>
        </div>
        <!--- END COL -->
      </div>
      <!--- END COL -->
    </div>
    <!--- END CONTAINER -->
  </div>

faqs.html导航栏：

<body data-spy="scroll" data-offset="80">
    <div id="nav" class="navbar navbar-default navbar-fixed-top menu-top">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse"
                            data-target=".navbar-collapse">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a href="index.html" class="navbar-brand">LOGO</a>
                    </div>
                    <div class="navbar-collapse collapse">
                        <nav>
                            <ul class="nav navbar-nav navbar-right">
                                <li><a href="index.html#home">Home</a></li>
                                <li><a href="index.html#service">Services</a></li>
                                <li><a href="index.html#corporate">Corporate</a></li>
                                <li><a href="index.html#contact">Contact</a></li>
                                <li><a href="bookingform.html">Booking Form</a></li>
                                <li class="active"><a href="faqs.html">FAQ</a></li>
                            </ul>
                        </nav>
                    </div>
                </div>
                <!--- END COL -->
            </div>
            <!--- END COL -->
        </div>
        <!--- END CONTAINER -->
    </div>

js文件开头的jQuery函数：

$(document).ready(function () {

    $('select').niceSelect();

    // Add smooth scrolling to all links in navbar + footer link
    $(".navbar a, footer a[href='#myPage'], .overlay-detail a").on('click', function (event) {

        // Prevent default anchor click behavior
        event.preventDefault();

        // Store hash
        var hash = this.hash;

        // Using jQuery's animate() method to add smooth page scroll
        // The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
        $('html, body').animate({
            scrollTop: $(hash).offset().top
        }, 900, function () {

            // Add hash (#) to URL when done scrolling (default click behavior)
            window.location.hash = hash;
        });
    });

这是在导航栏中单击BookingForm或FAQ选项卡时出现的控制台错误：

Uncaught TypeError: Cannot read property 'top' of undefined    app.js:17 
    at HTMLAnchorElement.<anonymous> (app.js:17)
    at HTMLAnchorElement.dispatch (jquery.min.js:3)
    at HTMLAnchorElement.r.handle (jquery.min.js:3)

Answer 1

您的某些元素给出了hash =“”; 您可否尝试如下修改并尝试

{
        var currentpage = window.location.pathname.split("/").pop();
        var nextpage = this.href.split("/").pop();
        if ("".search("#" > -1)) {
          nextpage = nextpage.split("#")[0];
        }
        if (this.hash != "" && currentpage == nextpage) {
          //prevent default only if  required
          // pages are different AND has hash
          event.preventDefault();
          // Store hash
          var hash = this.hash;
          // Using jQuery's animate() method to add smooth page scroll
          // The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
          $('html, body').animate({
            scrollTop: $(hash).offset().top
          }, 900, function () {
            // Add hash (#) to URL when done scrolling (default click behavior)
            window.location.hash = hash;
          });
        }
        else
        {
          //
        }
      }

Answer 2

尝试一下

添加到文档后的页面中，您希望获得这样的效果

在从另外两个html文件返回index.html时可以更平滑地过渡


      var hash=location.hash;
      if (location.hash!='') {
      window.scrollTo(0,0);
      $('html, body').animate({
            scrollTop: $(hash).offset().top
          }, 900, function () {
            // Add hash (#) to URL when done scrolling (default click behavior)
            window.location.hash = hash;
          });
      }
```

将2个html文件添加到我的一页滚动站点

2 个答案: