点击功能使页面以奇怪的方式滚动(不滚动到页面顶部)

Click function making page scroll in odd way (not to top of page)

本文关键字：滚动 顶部 方式 功能      更新时间：2023-09-26

第一次发问，长期潜伏。

我正在做一个渐隐/淡出切换，显示2个图表中的一个，这取决于你点击哪个按钮。

这一点工作得很好，但我得到一个奇怪的页面跳转故障。现在，这不是通常的跳到顶端的行为。我在代码中包含了这一部分，它不会这样做。

每次我点击其中一个按钮，页面就会向下滚动到窗口底部的图表区域。

但更奇怪的是。如果我使浏览器窗口非常短或非常窄(这是一个响应式网站)，它就会停止这个故障。在iPhone或iPad上也不会发生这种情况，即使我将浏览器宽度设置为与iPad相同的宽度，桌面浏览器仍然会跳转。

没有基于跳跃区域的视口宽度添加/删除的元素，也没有会被意外用作跳跃点的锚id。

不幸的是，我不能向您展示实际的页面，但我可以展示脚本和一些HTML。这两个切换的代码是相同的，只是id交换了一下。

脚本:

    $('#left-toggle > a').click(function(c)
    {
        c.preventDefault();
        c.stopPropagation();
        $('#right-toggle').removeClass('toggle-active');
        $('#left-toggle').addClass('toggle-active');
        $(pricing_subscriptionID).fadeOut('fast', function(){
            $(pricing_singleID).fadeIn('fast', function(){
            });
        });
    });

切换的HTML:

<div id="chart-toggle">
     <div id="left-toggle" class="toggle-active"><a href="#">Single Pricing</a></div>
    <div id="right-toggle"><a href="#">Subscription Pricing</a></div>
</div>

"toggle-active"只是用于样式化。

任何想法?

它似乎几乎想要把页面上的开关放在中间，但也没有把它们放在中间。

JSFiddle: http://jsfiddle.net/TmrLw/

这是因为你链接到#。这里有一些方法可以解决这个问题:

1。将"#"替换为其他内容

不是

<a href="#">Subscription Pricing</a>

试试这个:

<a href="Javascript: void(0);">Subscription Pricing</a>

这将为您提供您正在寻找的光标指针，并避免页面跳转。

2。创建一个具有指针效果的类

如果你使用这个CSS规则:

.pointer {
    cursor: pointer;
}

那么你可以用这个类来换行你的文本:

<div class="pointer">Subscription Pricing</div>

3。删除"#"

的默认效果

这个Javascript会去掉它的默认效果:

$('a[href="#"]').click(function(e)
{
    // Cancel the default action
    e.preventDefault();
});

希望能有所帮助

可能是因为链接的href是#，它链接到文档的顶部。尝试删除href属性

相关文章：