Question

我的问题是我的导航栏已滚动到链接功能，因为我的网站在一个页面中。

但我尝试使用外部链接（不在同一页面）添加一个新的菜单链接。

当我点击它时，它不会打开链接（我假设jQuery脚本试图滚动到它而不是打开...）

我该如何解决或添加例外？

这是html：

<ul class="menyy">
                    <li><a href="#info">Mis on Rahapuu?</a></li>
                    <li><a href="#kkk">KKK</a></li>
                    <li><a href="#meist">Kes me oleme?</a></li>
                    <li><a href="http://rahapuu.eu/laenud/" target="_blank">Laenud</a></li>
                    <li><a href="#kontakt">Kontakt</a></li>
                </ul>

这是用于平滑滚动的jQuery脚本：

//smooth scroll to href value
            jQuery(".tabs-btn ul li a, .navbar-nav li a, .navbar-brand, .menyy a").click(function(event){
                 event.preventDefault();
                 //calculate destination place
                 var dest=0;
                 if($(this.hash).offset().top > $(document).height()-$(window).height()){
                      dest=$(document).height()-$(window).height();
                 }else{
                      dest=$(this.hash).offset().top;
                 }
                 //go to destination
                 jQuery('html,body').animate({scrollTop:dest}, 1000,'swing');
             });

有什么建议吗？

Answer 1

您可以将其过滤为仅包含具有基于哈希的链接的锚点

jQuery(".tabs-btn ul li a, .navbar-nav li a, .navbar-brand, .menyy a").filter('[href^=#]').click(function(event){ ...

Answer 2

由于其他人抛弃了添加一个类（这是迄今为止最好的方法，但我建议只是在整个板上应用该类并简化选择器），我想我会提供一个通用的替代方法不需要修改HTML（如果由于某种原因你不能）：

$(".tabs-btn ul li a, .navbar-nav li a, .navbar-brand, .menyy a").filter(function(){
    return (!this.target || this.target !== '_blank');
}).click(function(e){
    e.preventDefault();

    //calculate destination place
    var dest = 0,
        htDiff = $(document).height() - $(window).height(),
        hashOffset = $(this.hash).offset().top;

    if(hashOffset > htDiff){
        dest = htDiff;
    } else {
        dest = hashOffset;
    }

    //go to destination
    $('html,body').animate({scrollTop:dest}, 1000,'swing');
});

这只会将原始对象集合过滤到未列出目标的项目，或者没有值为_blank的目标。我也冒昧地缓存你的计算，因为你多次使用它们。

Answer 3

您可以为所有其他人提供class名称并将链接保留一个

    <ul class="menyy">
        <li><a class="yourclass" href="#info">Mis on Rahapuu?</a></li>
        <li><a class="yourclass" href="#kkk">KKK</a></li>
        <li><a class="yourclass" href="#meist">Kes me oleme?</a></li>
        <li><a href="http://rahapuu.eu/laenud/" target="_blank">Laenud</a></li>
        <li><a class="yourclass" href="#kontakt">Kontakt</a></li>
    </ul>

改为：

jQuery(".tabs-btn ul li a, .navbar-nav li a, .navbar-brand, .menyy a .yourclass").click(function(event){

菜单有“滚动到#href”功能，但无法在那里使用目标空白链接

3 个答案: