1

我有一个页面，我有平滑滚动的锚链接，使用 jquery 1.10 和下面列出的代码。平滑滚动效果很好。单击“返回顶部”链接后，一个项目将添加到用户的历史记录中并在 url (as domain.com/page#header) 中可见，这是预期的。

但是，因为这会弄乱 url 并破坏后退按钮的功能，所以我试图从 url 和浏览器历史记录中删除锚点。我尝试了几种删除锚链接或历史记录项的方法，但它们都与平滑滚动的代码发生冲突。

所以我的问题是，在平滑滚动完成后，有谁知道如何从 url 中删除此锚点并删除最后一个历史记录项？

一个例子：http: //jsfiddle.net/CQywc/5/

编辑：我没有删除这个问题，因为我很难弄清楚我需要做什么，即使我看到了其他问题的答案（他们解决了一个稍微不同的问题，并且没有明确解决添加历史项目）。所以我会把这个留给那些和我有同样问题的人。

平滑滚动代码：

$(document).ready(function() {
  function filterPath(string) {
  return string
 .replace(/^\//,'')
 .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
 .replace(/\/$/,'');
  }
  var locationPath = filterPath(location.pathname);
  var scrollElem = scrollableElement('html', 'body');
  $('a[href*=#]').each(function() {
 var thisPath = filterPath(this.pathname) || locationPath;
 if (  locationPath == thisPath
 && (location.hostname == this.hostname || !this.hostname)
 && this.hash.replace(/#/,'') ) {
   var $target = $(this.hash), target = this.hash;
   if (target) {
  var targetOffset = $target.offset().top;
  $(this).click(function(event) {
    event.preventDefault();
    $(scrollElem).animate({scrollTop: targetOffset}, 400, function() {
   location.hash = target;
    });
  });
   }
 }
  });
  // use the first element that is "scrollable"
  function scrollableElement(els) {
 for (var i = 0, argLength = arguments.length; i <argLength; i++) {
   var el = arguments[i],
    $scrollElement = $(el);
   if ($scrollElement.scrollTop()> 0) {
  return el;
   } else {
  $scrollElement.scrollTop(1);
  var isScrollable = $scrollElement.scrollTop()> 0;
  $scrollElement.scrollTop(0);
  if (isScrollable) {
    return el;
  }
   }
 }
 return [];
  }
});
4

3 回答 3

1

我通过注释以下代码解决了这个问题：

location.hash = target; // comment by putting two forward slashes in front of this line of code

未注释时，它显式地将哈希添加到 url。感谢 Jeff B，在这个问题中。它还解决了添加的历史项目，因此后退按钮再次按预期工作。

于 2013-07-17T19:21:08.087 回答
0

您只需在脚本末尾添加以下代码，它将清除所有查询字符串或其他任何内容。

history.replaceState({}, '', '/');
于 2013-07-17T11:28:55.163 回答
0

您可以通过这段代码来实现相同的目的，而不是指向 div....

在application.js 中

function show_top(){
    if( $(document).scrollTop !=0 ){
        $ ('html, body').animate ( { scrollTop:0 } ,1000 );
    }
}

在视图中

<a href="javascript:" onclick="show_top()">GO TO TOP</a>
于 2013-07-17T14:21:59.040 回答