Question

叫我傻，但我没看到。我创建了一个Joomla页面，其中包含指向同一页面中各个部分的链接。非常基本的：<a href="#sed">然后是<p id="sed">。我包括这样的jQuery：

  <script src="/media/jui/js/jquery.min.js" type="text/javascript"></script>

这是Joomla 3的一部分。

我正在使用CSS-Tricks中的这个脚本，我在页面中添加了这个脚本：

    <script>
$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    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) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});
</script>

我已经摆弄CSS Tricks sample page（将其复制/粘贴到我自己的HTML编辑器并更改了一些代码），是的，它有效，但我不能让它自己工作页。该页面只是跳转到锚点但不能平滑滚动。

请注意：我几乎不知道任何JavaScript或jQuery，所以请耐心等待......对于一个jQuery专家来说，这一定是小菜一碟....

以下是我所做的测试页：http://test.tomhiemstra.nl。

任何帮助表示感谢。

干杯，

汤姆

Answer 1

我无法弄清楚造成这种情况的原因，但在您的网页上$未被识别。将脚本中的所有$替换为jQuery即可。

jQuery(function() {
  jQuery('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {

      var target = jQuery(this.hash);
      target = target.length ? target : jQuery('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        jQuery('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

或者，将您的函数包装为将$映射到jQuery的函数可能更好。

(function ($) {
    $(function () {
        $('a[href*=#]:not([href=#])').click(function () {
            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) {
                    $('html,body').animate({
                        scrollTop: target.offset().top
                    }, 1000);
                    return false;
                }
            }
        });
    });
})(jQuery);

Answer 2

你能试试吗

＆＃13;

$('a[href^="#"]').click(function(event) {
	event.preventDefault();
	var target = $(this).attr("href").substring(1);
	if(target) {
		$('html,body').animate({
          scrollTop: $('[name=' + target +']').offset().top
        }, 1000);
	}
});

＆＃13;

Answer 3

在上面的Talya S.的帮助下，这就是我想出的。我希望我做得对，所有括号和大括号等：

    <script>
   (function ($) {
$(function () {
    $('a[href*=#]:not([href=#])').click(function () {
        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) {
                $('html,body').animate({
                    scrollTop: target.offset().top
                }, 1000);
                return false;
            }
        }
    });
});
})(jQuery);
</script>

我添加了太多括号还是太少？

我仍然不明白，这就是为什么$不被认可为jQuery，这是你在jQuery中学到的最基本的东西之一（是的，我已经到了那么远:-P）。如果有人能够向我澄清这一点，就像我四岁那样＃34;

Thanx Talya S.再次为拼写错误道歉： - ）

汤姆

平滑滚动以锚定在同一页面上

3 个答案: