Javascript 防止哈希更改滚动

很抱歉下面的布局示例很难看。。。

我设法将我的id名称附加到url：

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

并加上：

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

一切都很好，但我只是不希望它滚动时，我点击链接

---

我该怎么做？非常感谢。

如果不需要id，只需一个

href=“#一些值

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

id

（在本例中的a标记上）然后，位置更改将导致滚动。您可以通过在现代浏览器中使用

历史

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

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>

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

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

//获取元素引用
var elems=document.getElementsByClassName（'my-class'）；
//迭代引用
对于（var i=0；i
location
不是
文档的一部分，而是
window
；还有
location.hash=el.id；
在您的函数中就足够了。在任何情况下，您将location hash更改为
#abc2
，那么为什么它不应该滚动到那里呢？看这里：实际上我在网站中使用的是一个javascript手风琴插件但问题是，当按钮被点击时，手风琴不会附加url…我不想包含卷轴的原因是它会弄乱手风琴的滚动…@Jack@VincentChua
//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;
  }
});