点击事件中跳转锚点链接的jquery代码

Question

正如描述所说，我在JavaScript中找到了许多关于平滑滚动和位置属性的内容，但似乎没有任何东西可以实现我想要的功能，即简单地模拟HTML“a”标记的功能（对于这个项目，我不需要使用HTML链接标记）。

- Marco Ramirez Castro

Answer 1

所以我的理解是你想在不使用HTML锚标签的情况下滚动到一个元素。 如果我理解得正确 假设你有一个HTML输入标签

<input type="button" id="top" value="button"/>

这个脚本会完成工作。

P.S. #bottom_id是你想要滚动到的元素的id， 或者是锚链接：

<a href="#bottom" id="bottom_id"></a>

脚本：

 $("#top").click(function() {
    $('html, body').animate({
        scrollTop: $("#bottom_id").offset().top
    }, 2000);
});

- Waleed Ahmed

Answer 2

jQuery的方式：

$("body").scrollTop($("[name=elementname]").position().top)

这会获取指定元素的顶部，并将滚动条位置设置为该位置。

有一个jQuery 插件 可以有效地实现此操作，但如果您想坚持使用纯JavaScript，只需像上一个答案中描述的那样使用element.scrollTo即可。

更好的文档可以在Mozilla的网站上找到。使用JavaScript。

- Ogre Codes

---

Jquery会更方便，我认为使用“scrollTo”作为插件中的一种聪明方式来实现它，如果没有其他方法，我想我会像那样做，但我希望还有另一种方法，比如已经定义好的函数可以解决问题，也许是goToURL()函数，但谢谢，这当然很有帮助。 - Marco Ramirez Castro

我在答案中加入了一些例子以增加趣味性。这不是内置方法，但足够简单。 - Ogre Codes

Answer 3

为了使JQuery将用户带到不同于页面的URL（如锚标签），请将window.location附加到事件上。

例如，这样：

$('#ClickMe').click(function(){ window.location = 'index.php'; });

如果用户点击具有ID“ClickMe”的元素（例如...），则会将其带到index.php页面。

- Paurian

---

啊，我想我误读了问题。由于某种原因，我以为他的意思只是跳到同一页上的一个名称标签。 - Ogre Codes