防止滚动更改哈希

Question

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

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

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

并添加：

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

但这最终具有与以下相同的效果：

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

一切都很好，但我只是不想让它在我点击链接时滚动 我该怎么做？非常感谢。

Answer 1

如果不需要 id，只需一个

href="#some-value

即可更改窗口位置而无需滚动页面。如果您确实需要文档中的

id

（在这种情况下在a标签上），那么位置更改将导致滚动。您可以通过在现代浏览器中使用

history

对象或通过在链接单击上存储滚动位置，然后使用

hashchange

事件重置它来解决此问题。

我将为这两种解决方案使用此标记：

示例标记：

<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 或 history.pushState

现场演示（点击）。

//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 和 hashchange 事件

现场演示（点击）。

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;
  }
});

Answer 2

我遇到的问题是我使用了平滑滚动行为，而 firefox 滚动位置在单击锚链接时跳来跳去。所以堆栈溢出这里没有任何效果。如果有人对我最近的做法感兴趣：

1. 在滚动侦听器中存储当前滚动位置
2. 创建一个 hashchange 监听器
3. 通过向 body 添加 css 来防止滚动，使用 window.scroll 函数并立即从 body 中删除 css 以启用滚动

举个例子：

document.addEventListener('DOMContentLoaded', () => {

  // store scroll position
  let scrollTop = document.documentElement.scrollTop
  window.addEventListener('scroll', () => scrollTop = document.documentElement.scrollTop)

  window.addEventListener('hashchange', () => {
    // disable scrolling
    document.body.style.overflow = 'hidden'

    // set current scroll position
    window.scroll(0, scrollTop)

    // enable scrolling
    setTimeout(() => {
      document.body.style.overflow = 'auto'
    }, 10)
  }, false)

  // trigger hashchange event on page load
  window.dispatchEvent(new Event('hashchange'))
})

Answer 3

如果location.hash = "#"或""出现滚动效果，其他情况，例如"#anychars" 浏览器铬

带滚动条的html，长文本：

<a href="#c1">c1</a>
<a href="#c2">c2</a>

js:

window.onhashchange=(e) => {
    if (location.hash=='#c1'){
        console.log(1) )
    }
    if (location.hash=='#c2'){
        console.log(2) )
    }
    location.hash="#null"
}