如何在不触发重新加载的情况下将URL哈希设置为“”（例如example.com/#hash-> example.com/）？

Question

我有一个使用自制的scrollspy的单页网站。 我正在使用history.pushState或history.replaceState在滚动到某个部分时设置哈希值。 但是， history.pushState(null,null,'')不会更改哈希值。 因此，当我从第二部分向上滚动时，URL仍然是example.com/#next-section 。

如果我使用window.location.hash = '' ，则页面将重新加载，即使我尝试捕获该事件也很奇怪。

注意：该代码段实际上并未显示问题，因为即使在整页模式下也不会出现URL哈希。

要查看实际效果，我创建了一个repl.it ，您必须在运行后将其扩展为整页。

 const FOCUS_HEIGHT = 160; let click = false; function spyOnScroll() { $('.menu-item').on('click', function(e) { click = true; var hash = $(e.target).attr('href'); console.log("clicked hash", hash); $('html').animate ( { scrollTop: $('.anchor' + hash).position().top, progress: function(){click = true; console.log("click: " + click)} }, 300, function() { click = false; console.log("finished. click: " + click); $('.menu-item[href="' + hash + '"]').addClass('active'); // make link active $('.menu-item[href!="' + hash + '"]').removeClass('active'); //make all others not active } ); }); let nav_links = $('.menu-item'); console.log("nav links: ", nav_links, typeof nav_links); let hashes = Array.from(nav_links).map(link => link.hash); hashes = ['', ...hashes]; console.log("hashes", hashes); let anchors = hashes.map((hash) => { return { 'hash': hash, 'position': $('.anchor'+hash).position().top } }); anchors = [...anchors, {'hash':'none', 'position': Math.pow(10,1000)}]; anchors = anchors.sort((A, B) => A.position - B.position); console.log("anchors", anchors); console.log("anchors: ", JSON.stringify(anchors)); let top_position = anchors[0].position; console.log("top position=" + top_position); let current_hash = window.location.hash; if (current_hash == '') { current_hash = hashes[0]; } let new_hash = current_hash; let current_index = hashes.indexOf(current_hash); let new_index = current_index; console.log("current hash=" + current_hash, "current_index", current_index); $(window).scroll(function(e) { console.log("scrolling..."); if (click) { console.log("scrolled due to click...returning"); e.preventDefault(); // click = false; return; } let window_position = $(window).scrollTop(); current_hash = window.location.hash; let deltas = anchors.map(a => a.position - window_position - FOCUS_HEIGHT); console.log("deltas: " + JSON.stringify(deltas)); new_index = anchors.map( a => a.position - window_position -FOCUS_HEIGHT > 0).indexOf(true); console.log("current_index", current_index, "new_index", new_index); console.log("hashes", hashes); if (new_index != current_index) { new_hash = hashes[new_index - 1]; current_hash = new_hash; current_index = new_index; console.log("new hash=" + new_hash + " current hash=" + current_hash); $('.menu-item[href="' + new_hash + '"]').addClass('active'); // make link active $('.menu-item[href!="' + new_hash + '"]').removeClass('active'); //make all others not active console.log("setting hash"); window.history.pushState(null, null, new_hash); } }); } $(window).on('load', spyOnScroll); 

 .nav { position: fixed; top: 0px; } .main { margin: 0 0 0 0; height: 2000px; } .section { height: 500px; padding-top: 0em; } .section:last-of-type { height: 2000px; } .menu-item { font-size: 2em; padding: 0.5em; margin: 0.5em; color: black; } .anchor { padding: 0; margin: 0; height: 0; } .active { color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="nav"> <a class="menu-item active" href="">home</a> <a class="menu-item" href="#one">one</a> <a class="menu-item" href="#two">two</a> <a class="menu-item" href="#three">three</a> </div> <div class="main"> <div class="section"> <a class="anchor" id="" name=""></a> <h1 id="top">Home</span></h1> </div> <div class="section"> <a class="anchor" id="one" name="one"></a> <h1>One</span></h1> </div> <div class="section"> <a class="anchor" id="two" name="two"></a> <h1>Two</span></h1> </div> <div class="section"> <a class="anchor" id="three" name="three"></a> <h1>Three</span></h1> </div> </div> 

Answer 1

我认为您无需刷新即可完全删除它，但请尝试仅使用window.location.hash = '#' 。