Javascript 奇怪错误-语法错误，无法识别带有[href]的表达式，且画布未显示

我对引导和jquery javascript有一个奇怪的问题

我正在使用以下jquery脚本在单击锚定和返回到页面顶部（带有删除#anchorName扩展名）时实现平滑滚动：

如果我使用双引号（

$（'a[href*=“#”]：not（[href=“#”]）

），上面的脚本工作得很好，但我测试的页面包含HTML5画布，而该画布不显示

另一方面，如果我不使用双引号（

$（'a[href*=#]：not（[href=#]）

），则“锚定”功能不起作用（我没有平滑的滚动），并且显示HTML5画布

我在论坛上看到，解决方案可能是：

1) double quoting :

$('a[href*="#"]:not([href="#"])')

或

我尝试了这两种解决方案，但都不起作用

使用jquery 1.12.0，我得到以下错误：

Error: Syntax error, unrecognized expression: a[href*=#]:not([href=#])

欢迎任何帮助

更新解决方案：

最初，我的代码是：

    $(function() {
        $('a[href*=#]:not([href=#])').click(function(event) {
          event.preventDefault();
          if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
            var target = $(this.hash);
          target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
          if (target.length) {
            var hash = this.hash; // 'this' will not be in scope in callback
          $('html,body').animate({ scrollTop: target.offset().top - 55}, 300, function() {
            href = window.location.href;
            history.pushState({page:href}, null, href.split('#')[0]+hash);
            });
          return false;
          }
          }
          });

    $(window).bind('popstate', function(event) {
        var state = event.originalEvent.state;
        var target = window.location.href.split('#');
        var href = target[0];
        if (state) {
        $('html,body').animate({ scrollTop: 0 }, 300, function() {
          history.replaceState({}, null, href);
          })
        }
        });

    window.onload = function() {
      history.replaceState({ path: window.location.href }, '');
        }   
    });

最后，以下版本有效：

    $(window).bind("load", function () {

      $('a[href*="#"]:not([href="#"])').click(function(event) {
        event.preventDefault();
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
        var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        var hash = this.hash; // 'this' will not be in scope in callback
        $('html,body').animate({ scrollTop: target.offset().top - 55}, 300, function() {
          href = window.location.href;
          history.pushState({page:href}, null, href.split('#')[0]+hash);
        });
        return false;
      }
      }
      });

      $(window).bind('popstate', function(event) {
        var state = event.originalEvent.state;
        var target = window.location.href.split('#');
        var href = target[0];
        if (state) {
          $('html,body').animate({ scrollTop: 0 }, 300, function() {
          history.replaceState({}, null, href);
          });
        }
      });
    });

对于初始版本，脚本似乎是在加载页面之前执行的，可能画布也没有加载。通过将所有脚本放入“

$（window）.bind（“load”），

，我认为在加载完所有脚本后，将锚定并返回页面顶部。有人可以确认这一点吗

---

谢谢

提供您页面的链接。我们在这里没有看到画布。我把它放在上面，请参阅“相关页面…”。。。“你说问题是画布不工作。在你提供的链接上，画布工作。画布显示并工作，但锚的平滑滚动不工作，所以线程非常接近你所寻找的。

    $(function() {
        $('a[href*=#]:not([href=#])').click(function(event) {
          event.preventDefault();
          if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
            var target = $(this.hash);
          target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
          if (target.length) {
            var hash = this.hash; // 'this' will not be in scope in callback
          $('html,body').animate({ scrollTop: target.offset().top - 55}, 300, function() {
            href = window.location.href;
            history.pushState({page:href}, null, href.split('#')[0]+hash);
            });
          return false;
          }
          }
          });

    $(window).bind('popstate', function(event) {
        var state = event.originalEvent.state;
        var target = window.location.href.split('#');
        var href = target[0];
        if (state) {
        $('html,body').animate({ scrollTop: 0 }, 300, function() {
          history.replaceState({}, null, href);
          })
        }
        });

    window.onload = function() {
      history.replaceState({ path: window.location.href }, '');
        }   
    });

    $(window).bind("load", function () {

      $('a[href*="#"]:not([href="#"])').click(function(event) {
        event.preventDefault();
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
        var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        var hash = this.hash; // 'this' will not be in scope in callback
        $('html,body').animate({ scrollTop: target.offset().top - 55}, 300, function() {
          href = window.location.href;
          history.pushState({page:href}, null, href.split('#')[0]+hash);
        });
        return false;
      }
      }
      });

      $(window).bind('popstate', function(event) {
        var state = event.originalEvent.state;
        var target = window.location.href.split('#');
        var href = target[0];
        if (state) {
          $('html,body').animate({ scrollTop: 0 }, 300, function() {
          history.replaceState({}, null, href);
          });
        }
      });
    });