Question

我不知道如何读取错误日志，因此需要帮助。目前，我正在尝试找出代码中的错误，该错误使我可以链接到页面上的特定ID。这是我的jQuery：

jQuery(function($) {
    $(function() {
        $('a[href*=#]').on('click', function(e) {
            e.preventDefault();
            $('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top}, 800, 'linear');
        });
    });
});

这是错误日志：

jquery.js?ver=1.12.4:2 Uncaught Error: Syntax error, unrecognized expression: /self-storage/midland-tx/#facility-page-table
    at Function.fa.error (jquery.js?ver=1.12.4:2)
    at fa.tokenize (jquery.js?ver=1.12.4:2)
    at fa.select (jquery.js?ver=1.12.4:2)
    at Function.fa (jquery.js?ver=1.12.4:2)
    at Function.a.find (jquery-migrate.min.js?ver=1.4.1:2)
    at n.fn.init.find (jquery.js?ver=1.12.4:2)
    at n.fn.init.a.fn.find (jquery-migrate.min.js?ver=1.4.1:2)
    at a.fn.init.n.fn.init (jquery.js?ver=1.12.4:2)
    at new a.fn.init (jquery-migrate.min.js?ver=1.4.1:2)
    at n (jquery.js?ver=1.12.4:2)

任何帮助将不胜感激，谢谢。请让我知道我在做什么错

这是HTML

    <div class="moving-supplies-page">
    <div id="blurred-image-container">
        <div class="img-src"></div>
        <div class="img-src blurred-image"></div>
    </div>
    <div id="heading-container">
        <div class="heading">
            <h1>Sizes and Prices</h1>
            <p>Sizes and Prices Vary From Location to Location, Please Select Your Location</p>
        </div>
        <div class="form-group">
            <div class="moving-supplies-locations-list">
                <div class="state-name" id="utah">
                    <h2>Utah</h2>
                    <ul>
                        <li><i class="fa fa-map-marker" aria-hidden="true"></i> <a href="/self-storage/provo-ut/#facility-page-table"> Provo, Ut</a></li>
                    </ul>
                </div>
                <div class="state-name" id="texas">
                    <h2>Texas</h2>
                    <ul>
                        <li><i class="fa fa-map-marker" aria-hidden="true"></i> <a role="button432-978-4561" href="/self-storage/midland-tx/#facility-page-table"> Midland, Tx</a></li>
                        <li><i class="fa fa-map-marker" aria-hidden="true"></i> <a href="/self-storage/abilene-tx/north-abilene/#facility-page-table"> North 1st Abilene, Tx</a></li>
                        <li><i class="fa fa-map-marker" aria-hidden="true"></i> <a href="/self-storage/abilene-tx/east-abilene/#facility-page-table"> East Abilene, Tx</a></li>
                        <li><i class="fa fa-map-marker" aria-hidden="true"></i> <a href="/self-storage/abilene-tx/south-abilene/#facility-page-table"> South 41st Abilene, Tx</a></li>
                        <li><i class="fa fa-map-marker" aria-hidden="true"></i> <a href="/self-storage/wichita-falls-tx/#facility-page-table"> Wichita Falls, Tx</a></li>
                    </ul>
                </div>
                <div class="state-name" id="ohio">
                    <h2>Ohio</h2>
                    <ul>
                        <li><i class="fa fa-map-marker" aria-hidden="true"></i> <a href="/self-storage/dayton-oh/#facility-page-table"> Dayton, Oh</a></li> 
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

两个问题：

正如其他人所述，选择器需要在href字符串周围加上引号。
您正在将整个href用于scrollTop选择器。仅使用"hash"部分。

$(function() {
  $('a[href*="#"]').on('click', function(e) {
    e.preventDefault();
    var hash = this.hash;
    console.log(hash);
    $('html, body').animate({
      scrollTop: $(hash).offset().top
    }, 800, 'linear');
  });
});

#facility-page-table {
  margin: 150vh 0 2em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="/self-storage/midland-tx/#facility-page-table">Click Here</a>

<div id="facility-page-table">
  Stuff
</div>

hash是not supported in some browsers。这是另一种选择：

$(function() {
  $('a[href*="#"]').on('click', function(e) {
    e.preventDefault();
    var hash = this.href.substring(this.href.indexOf('#'));
    console.log(hash);
    $('html, body').animate({
      scrollTop: $(hash).offset().top
    }, 800, 'linear');
  });
});

#facility-page-table {
  margin: 150vh 0 2em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="/self-storage/midland-tx/#facility-page-table">Click Here</a>

<div id="facility-page-table">
  Stuff
</div>

Google Dev Tools Console中的jQuery错误

1 个答案: