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

叫我笨蛋，但我看不出来。 我制作了一个Joomla页面，其中包含指向同一页面中各部分的链接。非常基本：

，我已将其放在页面的下面：

    <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>


$（函数（）{
$（'a[href*=#]：非（[href=#]）。单击（函数（）{
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（目标长度）{
$（'html，body'）。设置动画({
scrollTop:target.offset（）.top
}, 1000);
返回false；
}
}
});
});

我已经修改过（将它复制/粘贴到我自己的HTML编辑器中，并修改了一些代码），是的，它可以工作，但我无法让它在我自己的页面中工作。页面只是跳转到锚点，但滚动不平稳

请注意：我对JavaScript或jQuery几乎一无所知，所以请耐心听我说。。。对于jQuery专家来说，这一定是小菜一碟

这是我制作的测试页面：

谢谢你的帮助

干杯

汤姆，你能试试这个吗


$（'a[href^=“#”]”）。单击（函数（事件）{
event.preventDefault（）；
var target=$（this.attr（“href”）.substring（1）；
如果（目标）{
$（'html，body'）。设置动画({
scrollTop:$（'[name='+target+']'）.offset（）.top
}, 1000);
}
});我不知道是什么原因导致了这种情况，但是在您的页面上，
$
没有被识别出来。将脚本中的所有
$
替换为
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);

在上面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>


（函数（$）{
$（函数（）{
$（'a[href*=#]：非（[href=#]）。单击（函数（）{
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（目标长度）{
$（'html，body'）。设置动画({
scrollTop:target.offset（）.top
}, 1000);
返回false；
}
}
});
});
})（jQuery）；

我添加的括号太多还是太少

但是，我仍然不明白的是，为什么$没有被识别为jQuery，这是您在jQuery中学到的最基本的东西之一（是的，我已经走了这么远：-p）。如果有人能向我澄清这一点，“就像我是一个四岁的孩子”

再次感谢Talya S.和我对拼写错误的道歉：-）

Thom
页面上的jQuery似乎有问题，尝试选择任何元素都会返回null。例如，只需在控制台Hey Talya S中插入
$（'a'）
，非常感谢。我自己永远也不会解决这个问题。我将$改为jQuery，它成功了。之后，我将您建议的代码添加到我用$。我将在下面发布最终在网站上起作用的内容。但你们要问的问题是：你们是如何发现问题的？这是谷歌Chrome控制台吗？是的，是Chrome控制台（尽管其他浏览器也有自己的）。实际上，我将另一个应答者的脚本粘贴到了其中，并得到了一个错误“UncaughtTypeError:无法读取null（…）的属性'click'，因此我尝试了摆弄不同的选择器，直到我注意到即使是最简单的选择器也不起作用（如我在关于
$（'a'）
的评论中所示），这是Talya而不是Tanya；）我不确定这里的事情是否真的是这样，如果我的回答为你解决了问题，你就接受吧，没有必要再发一封你自己的。如果您觉得不完整，可以在评论中建议对其进行编辑，当然也可以提出问题。我也不知道你在这里粘贴了什么，为什么脚本会出现两次。如果还有一些事情你仍然不明白（比如为什么你的页面上没有识别$），你可以创建一个新问题，或者编辑这个问题。一个新的答案真的不合适。你说得太对了，@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>