删除/避免将目标链接添加到URL [英] Remove/avoid adding target link to URL

问题描述

对于这里的jQuery/JavaScript专家来说，这可能很简单，但我只是无法在网络上找到解决方案.

This one may be simple for the jQuery/JavaScript gurus here, but I just can't find a solution for it around the web.

案例

我在页面底部有一个链接，显示为Back to Top，该链接只是这样的目标链接:

I have a link at the bottom of a page that says Back to Top, the link is simply a target link like this:

<a href="#top" class="standard">Back to Top</a>

因此，当您单击它时，它会跳到页面顶部.很简单.

So when you click it, it jumps to the top of page. Simple.

问题

单击目标链接时，会将ID #top添加到页面的URL，即:

When the target link is clicked, the id #top is added to the URL of the page, ie:

http://website.com/about-us/#top

问题

是否有一种方法可以删除或避免将该ID #top添加到页面的URL中，但保留页面跳转到顶部的功能?

Is there a way to remove or avoid getting that id #top added to the URL of the page but retain the functionality of the page jumping to the top?

在此方面的任何帮助都将不胜感激.

Any help with this is greatly appreciated.

推荐答案

在任何情况下(jQuery或原始JavaScript)，您都需要执行以下操作:

In either case (jQuery or vanilla JavaScript), you'll want to do the following:

• 选择所有将href设置为#top
的锚标记
• 创建一个跳转"功能，将页面位置设置为顶部，然后 返回false 以防止默认链接行为
• 将跳转"功能绑定到找到的所有节点的click事件

• Select all anchor tags where href is set to #top
• Create a "jump" function which sets the page position to the top and returns false to prevent the default link behavior
• Bind the "jump" function to the click event of all of the nodes found

要跳转，您有几种选择.我在下面的第一个示例中提供了它们(特定于jQuery和JS).

To jump you have several options. I've provided them (jQuery and JS specific) in the first example below.

使用jQuery

jQuery使选择和绑定到click事件变得容易.然后，您可以使用jQuery或直接的JavaScript跳到页面顶部.

jQuery makes selecting and binding to a click event easy. Then you can jump to the top of the page using jQuery or straight JavaScript.

$('a[href="#top"]').click(function() {

   //
   // To jump, pick one...
   //

   // Vanilla JS Jump
   window.scroll(0,0)

   // Another Vanilla JS Jump
   window.scrollTo(0,0)

   // jQuery Jump
   $('html,body').scrollTop(0);

   // Fancy jQuery Animated Scrolling 
   $('html,body').animate({ scrollTop: 0 }, 'slow');

   //
   // ...then prevent the default behavior by returning false.
   //

   return false;

});

jQuery的 animate 提供了动画持续时间和缓动选项以及设置回调的功能

jQuery's animate provides options for animation duration and easing along with the ability to set a callback.

香草JavaScript

您也可以在整个过程中使用Vanilla JS.但是，查询和绑定会变得更加痛苦.

You can also use Vanilla JS the whole way through... Querying and binding, however, become a bit more painful.

现代浏览器支持 document.querySelectorAll() 允许您像使用jQuery一样捕获所有链接元素:

Modern browsers support document.querySelectorAll() which will allow you to grab all of the link elements just as you would with jQuery:

var links = document.querySelectorAll('a[href="#top"]');

然后遍历元素并绑定跳转":

Then loop over the elements and bind the "jump":

for (var i = links.length - 1; i >= 0; i--) {
  links[i].onclick = function() { window.scroll(); return false; };
};

如果目标浏览器不给您querySelectorAll礼物，您只需遍历所有锚标记以查找链接到#top的那些锚标记:

If your target browser doesn't gift you with querySelectorAll you just loop through all of the anchor tags to find the ones linked to #top:

var links = document.body.getElementsByTagName('a');
for (var i = links.length - 1; i >= 0; i--) {
  var l = links[i];
  if(l.getAttribute('href') === '#top') {
    l.onclick = function() { window.scroll(); return false; }
  }
}

这篇关于删除/避免将目标链接添加到URL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！