通过锚标签的点击功能停止滚动顶部

Posted 2023-03-05

【中文标题】通过锚标签的点击功能停止滚动顶部

【英文标题】：Stop scrolling top by the click function of anchor tag

【发布时间】：2014-09-08 12:53:11

【问题描述】：

我有一个锚标记，点击它时似乎会滚动到屏幕顶部。

我正在使用 onclick 并向函数发送模型属性。

如何防止滚动到顶部。

我尝试将 href 输入为 javascript:void(0); 并尝试returning false。

<a href="javascript:void(0);" onclick="GetUsers('@(user.Code)');"><img ... /></a>

function GetUsers(Code) 
    $.ajax(
        ...
    );                                             

更新

尝试调试它并没有到达这一行。

 var user = $(this).data('user-code'); 

页面上也没有错误。

$.ajax(
            type: "GET",
            url: "/Admin/GetUsers/",
            data:  "User": user,
            success: function (data, textStatus)  ...

还没到这一步……

更新

现在获取所有信息，尽管滚动仍然是一个问题。阻止默认值似乎没有任何区别。

【问题讨论】：

@(user.Code)，是某种模板吗？

@parchment 来自我猜 Razor 的语法。

@RoryMcCrossan 哦，我不熟悉那个......我会指出你需要在你的答案中以某种方式传递它，但你已经这样做了。

@parchment 是的，刚刚注意到我自己 :) 无论如何，谢谢。

是的，我正在使用剃须刀。 @foreach（模型中的 var 用户）

【参考方案1】：

为此，您需要停止按钮的默认操作。首先，使用 jQuery 来附加你的事件而不是过时的 on 属性：

<a href="#" class="myLink" data-user-code="@(user.Code)"><img /></a>

然后在您的 jQuery 事件处理程序中，您可以在传递的事件上使用 preventDefault：

$('.myLink').click(function(e) 
    e.preventDefault();
    var user = $(this).data('user-code');
    $.ajax(
        // ajax settings...
    ); 
);

我在元素上使用了data 属性来保存我猜想在您的 AJAX 调用中需要的参数。

【参考方案2】：

在不添加到 javascript 的情况下停止滚动的一种方法是将 href 设置为具有不在页面上的 ID 的锚点，例如 -

<a href="#!" onclick="GetUsers('@(user.Code)');"><img ... /></a>

会起作用，因为您不太可能拥有名称为“！”的元素在您的页面上。