页面中的链接不起作用

Posted

技术标签:

【中文标题】页面中的链接不起作用【英文标题】:Links in page don't work 【发布时间】:2016-02-25 13:16:37 【问题描述】:

我在一页中的链接有问题。当我想向下滚动时它可以工作,但是当我想向上滚动时它会停留在同一个地方。这是代码的一部分:

(function($)
/* Store the original positions */
var d1 = $('.one');
var d1orgtop = d1.position().top;
var d2 = $('.two');
var d2orgtop = d2.position().top;
var d3 = $('.three');
var d3orgtop = d3.position().top;
var d4 = $('.four');
var d4orgtop = d4.position().top;

/* respond to the scroll event */
$(window).scroll(function()
    /* get the current scroll position */
    var st = $(window).scrollTop();

    /* change classes based on section positions */
    if (st >= d1orgtop) 
        d1.addClass('latched');
     else 
        d1.removeClass('latched');
    
    if (st >= d2orgtop) 
        d2.addClass('latched');
     else 
        d2.removeClass('latched');
    
    if (st >= d3orgtop) 
        d3.addClass('latched');
     else 
        d3.removeClass('latched');
    
    if (st >= d4orgtop) 
        d4.addClass('latched');
     else 
        d4.removeClass('latched');
    
);

JSFIDDLE 中的例子JSFIDDLE

当我单击页面顶部的 href 时,它会向下滚动。但是当我点击底部的href时,什么也没有发生。我的错在哪里?

【问题讨论】:

【参考方案1】:

DEMO

因为position:fixed.latched 课堂上的风格。您删除它并修复它,但是根据我的可视化,它会影响原始功能。因此,作为替代方案,我在jquery hack 下方提供了实际功能。

$('a[href="#intro"]').on('click',function()
  $(d1,d2,d3,d4).removeClass('latched');  
  //on click of #intro element you just remove latched class from all the elements
)

【讨论】:

任何时候..快乐编码..:) 但是如果我想使用一些导航,比如 topbar 或 sth 怎么办?不幸的是,它不能很好地工作...... 你能在小提琴中展示一个演示吗?无法准确了解您的要求! 没关系,我使用 jquery 函数 ScrollTo() 找到了更好的解决方案 ;) 无论如何感谢您的反馈!【参考方案2】:

我遇到了类似的问题,出于某些其他原因,我使用了一个函数来设置滚动到页面。

我已经用您的示例进行了测试并且工作正常,请参阅小提琴:https://jsfiddle.net/nft4oeab/3/

函数是:

function scrollToAnchor(aid)
    var aTag = $("a[name='"+ aid +"']");
    $('html,body').animate(scrollTop: aTag.offset().top,'slow');

希望对你有帮助。

【讨论】:

但这只是因为 href"#" 而不是脚本。当我想在导航栏中使用它时它不起作用。

以上是关于页面中的链接不起作用的主要内容,如果未能解决你的问题,请参考以下文章

图片后面的href链接在ie中不起作用

rmarkdown 中的内部链接不起作用

Safari 中的 UIWebView 打开链接不起作用?

为啥我的 index.html 文件中的图标链接不起作用?

为啥 iframe 中的链接在 phonegap ios 应用程序中不起作用?

php中的cURL不起作用