防止哈希更改滚动 [英] Prevent hash change from scrolling

问题描述

抱歉下面的丑陋布局示例...http://www.wthdesign.net/test/test2.html

我设法将我的 ID 名称附加到网址:

函数 generateUrl(el){var currentId = $(el).attr('id');document.location.hash = currentId;}

并添加:

<a id="abc2" onClick="generateUrl(this)" >这是一个锚btn</a>

但这最终会产生与以下相同的效果:

<a id="abc2" href="#abc2" >这是一个锚btn</a>

一切都很好，但我只是不希望它在我点击链接时滚动我该怎么做?非常感谢.

解决方案

如果不需要 id，只需一个 href="#some-value 将改变窗口位置而不滚动页面. 如果您确实需要文档中的 id(在本例中位于 a 标签上)，则位置更改将导致滚动.您可以使用 history 现代浏览器中的对象，或者通过在链接点击上存储滚动位置，然后使用 hashchange 事件重置它.

我将在这两种解决方案中使用此标记:

示例标记:

<a id="abc1" href="#abc1" class="my-class">这是一个锚btn</a><div class="filler"></div><a id="abc2" href="#abc2" class="my-class">这是一个锚btn</a><div class="filler"></div><a id="abc3" href="#abc3" class="my-class">这是一个锚点 btn</a><div class="filler"></div>

history.replaceState 或 history.pushState

现场演示(点击).

//获取元素引用var elems = document.getElementsByClassName('my-class');//遍历引用for (var i=0; i

scrollTop 和 hashchange 事件

现场演示(点击).

JavaScript:

//获取元素引用var elems = document.getElementsByClassName('my-class');//遍历引用for (var i=0; i

Sorry for the ugly layout example below... http://www.wthdesign.net/test/test2.html

I managed to append my id name to the url:

function generateUrl(el)
{
    var currentId = $(el).attr('id');
    document.location.hash = currentId;
}

and add:

<a id="abc2" onClick="generateUrl(this)" >this is an anchor btn</a>

but this end up having the same effect as:

<a id="abc2" href="#abc2" >this is an anchor btn</a>

Everything is fine but I just don't want it to scroll when when I click on the link How should I do that? Many thanks in advance.

解决方案

If the ids aren't necessary, just an href="#some-value will change the window location without scrolling the page. If you do need the id in the document (on the a tags in this case) then the location change will cause a scroll. You can work around this by using the history object in modern browsers or by storing the scroll location on the link click, then resetting it using the hashchange event.

I will use this markup for both solutions:

Sample markup:

<div class="filler"></div>
<a id="abc1" href="#abc1" class="my-class">this is an anchor btn</a>
<div class="filler"></div>
<a id="abc2" href="#abc2" class="my-class">this is an anchor btn</a>
<div class="filler"></div>
<a id="abc3" href="#abc3" class="my-class">this is an anchor btn</a>
<div class="filler"></div>

history.replaceState or history.pushState

Live demo (click).

//get element referneces
var elems = document.getElementsByClassName('my-class');

//iterate over the references
for (var i=0; i<elems.length; ++i) {
  //add click function to each element
  elems[i].addEventListener('click', clickFunc);
}

//this will store the scroll position
var keepScroll = false;

//fires when a ".my-class" link is clicked
function clickFunc(e) {
  //prevent default behavior of the link
  e.preventDefault();
  //add hash
  history.replaceState({}, '', e.target.href);
}

scrollTop and hashchange event

Live demo (click).

JavaScript:

//get element referneces
var elems = document.getElementsByClassName('my-class');

//iterate over the references
for (var i=0; i<elems.length; ++i) {
  //add click function to each element
  elems[i].addEventListener('click', clickFunc);
}

//this will store the scroll position
var keepScroll = false;

//fires when a ".my-class" link is clicked
function clickFunc(e) {
  //if the location hash is already set to this link
  if (window.location.hash === '#'+e.target.id) {
    //do nothing
    e.preventDefault(); 
  }
  else {
    //the location will change - so store the scroll position
    keepScroll = document.body.scrollTop;
  }
}

window.addEventListener('hashchange', function(e) {
  //the location has has changed

  //if "keepScroll has been set
  if (keepScroll !== false) {
    //move scroll position to stored position
    document.body.scrollTop = keepScroll;
    //set "keepScroll" to false so that this behavior won't affect irrelevant links
    keepScroll = false;
  }
});

这篇关于防止哈希更改滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！