- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
在具有固定顶部菜单和 anchor 导航的单页布局上,我有一个“scrollspy”,它可以更改滚动上的片段标识符,根据滚动位置为菜单链接提供一个事件类,并使用动画滚动到 anchor Velocity.js.
不幸的是,它也做了什么,当点击浏览器后退按钮时,它会带我完成滚动方式的所有步骤,这意味着我加载网站并向下和向上滚动一点点,然后经常点击后退按钮,浏览器将也可以向下和向上滚动,但实际上不会转到上次访问的 ID 或返回浏览器历史记录。
// jQuery on DOM ready
// In-Page Scroll Animation with VelocityJS
// ------------------------------------------------ //
// https://john-dugan.com/fixed-headers-with-hash-links/
$('.menu-a').on('click', function(e) {
var hash = this.hash,
$hash = $(hash)
addHash = function() {
window.location.hash = hash;
};
$hash.velocity("scroll", { duration: 700, easing: [ .4, .21, .35, 1 ], complete: addHash });
e.preventDefault();
});
// ScrollSpy for Menu items and Fragment Identifier
// ------------------------------------------------ //
// https://jsfiddle.net/mekwall/up4nu/
$menuLink = $('.menu-a')
var lastId,
// Anchors corresponding to menu items
scrollItems = $menuLink.map(function(){
var item = $($(this).attr("href"));
if (item.length) { return item; }
});
$(window).scroll(function(){
// Get container scroll position
var fromTop = $(this).scrollTop()+ 30; // or the value for the #navigation height
// Get id of current scroll item
var cur = scrollItems.map(function(){
if ($(this).offset().top < fromTop)
return this;
});
// Get the id of the current element
cur = cur[cur.length-1];
var id = cur && cur.length ? cur[0].id : "";
if (lastId !== id) {
lastId = id;
// Set/remove active class
$menuLink
.parent().removeClass("active")
.end().filter("[href='#"+id+"']").parent().addClass("active");
}
// If supported by the browser we can also update the URL
// http://codepen.io/grayghostvisuals/pen/EtdwL
if (window.history && window.history.pushState) {
history.pushState("", document.title,'#'+id);
}
});
使用上面的代码,以下工作正常:
当使用 VelocityJS 滚动动画点击菜单链接时,哈希或片段标识符更新正常。
在滚动时将事件类赋予相应的菜单链接。
片段标识符在滚动而不是单击菜单链接时也能正常更新。
问题
第 1 部分:当您在 fiddle 上滚动一点点然后点击后退按钮时,您会看到滚动条以完全相同的方式“移动”,记住已完成的滚动。
我需要后退按钮像往常一样工作。a) 返回浏览器历史记录并返回到您所在的页面/站点,然后b) 单击 anchor 链接 (i),然后单击 anchor 链接 (ii),然后单击后退按钮,页面应返回到 anchor 链接 (i)。
第 2 部分: 由于 IE8 不支持 history.pushState
我正在寻找一种使用 window.location.hash = $(this) 的方法.attr('id');
代替。无论我在代码末尾尝试了什么,我都无法让 window.location.hash = $(this).attr('id');
工作。我真的不想为此使用 HistoryJS 或其他东西,但有兴趣学习并自己编写它。
除了后退按钮损坏的行为外,我想要的所有其他行为都已经存在,现在我只需要修复后退按钮的行为。
编辑我想我可能找到了解决方案 here , 将测试然后详细回复如果我让它工作。
相关:
smooth scrolling and get back button with popState on Firefox - need to click twice
jQuery in page back button scrolling
Modifying document.location.hash without page scrolling
最佳答案
要回答你问题的第一部分,如果你不想污染浏览器的历史记录,你可以使用 history.replaceState()
而不是 history.pushState()
。 pushState
更改 URL 并将新条目添加到浏览器的历史记录中,replaceState
更改 URL 的同时修改当前历史记录条目而不是添加新条目。
还有一篇很好的文章介绍了 pushState
和 replaceState
之间的区别 on MDN .
关于javascript - 更改滚动时的 URL 哈希值并保持后退按钮正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37419183/
浏览器或类似浏览器的应用程序中的后退和前进按钮暂时导航(用户导航页面的顺序),这可能不一定反射(reflect)页面的逻辑顺序。是否有任何研究探讨这如何影响用户的心理模型?关于如何提高可用性和减少困惑
如果你去http://www.deviantart.com/并等待几秒钟,以便在引擎盖下加载 javascript,您可以单击一个链接,而不是转到该链接,您将转到 #/someId。您可以后退/前进。
Closed. This question does not meet Stack Overflow guidelines。它当前不接受答案。 想改善这个问题吗?更新问题,以便将其作为on-topic
This question already has answers here: How to stop audio from playing when back button is pressed?
Visual Studio 有一个名为 MouseNavi 的插件它允许您使用鼠标拇指按钮来浏览您的历史记录。 Eclipse 是否存在类似的扩展? 最佳答案 我不知道有任何 Eclipse 插件可以
我在grails上开发了一个小应用程序,第一页是我提供的邮政编码,可以按商店搜索附近的商店并选择它,然后按下一步按钮,第二页上是输入客户详细信息,然后按下一步按钮在第三页上显示输入的值,然后保存它。现
我有一个带有表单的页面,我试图在其中防止重复提交,这非常简单(以防万一有人好奇,我使用了这个 $("form").submit(function() { setTimeout(function
在过去的两天里,我一直在用一个恼人的小故障敲我的头,希望有人能解释一下。 基本设置:我有一个带有播放器的 AVPlayerLayer, View 中有一个平移手势识别器,我希望用户能够来回滑动手指,视
我有一个相当具体的用例。 假设我从页面 A 导航到页面 B(添加一个历史状态)。然后,在页面 B 上,我通过打开模式与该页面进行交互。但模式的实现方式是在单击浏览器后退按钮时关闭。 当模式打开时: n
我以前自己尝试过,但失败了。如何将 JButton 添加到 JFrame 以将其带回到之前打开的 JFrame 或“主页”框架。 在我的应用程序中,我有 4 个 JFrame,主要的和 3 个可通过按
想法是显示消息,这将通知用户,当他使用“后退”按钮时,应用程序的ajax部分可能会错误地工作。是的,有很多讨论,但没有解决方案。我发现最好的:在服务器端存储有关最后一页的信息,并通过 ajax 检查当
我有一个带有Fragment的Activity,并且有很多交易,所以后退按钮通常只是回滚Fragment交易 .但我需要检测最后一次按下。 我不能使用 onPause 方法,因为我不想在用户按下主页或
我目前使用Glide库播放GIF如下。 Glide.with(this).load(gifUrl).into(ImageView); 这很好用,但我希望用户可以选择倒回、暂停和转发 GIF。我在想只是
我正在开发一个 WPF 桌面应用程序,我有一个主窗口,我使用框架控件导航到不同的页面。它工作得很好。但我希望删除后退/前进。我该怎么做 ?请在这方面帮助我! 最佳答案 设置 NavigationUIV
我正在游戏结束时显示插页式广告。当用户快速按下“后退”按钮时,有时会发生崩溃: java.lang.IllegalStateException at android.media.MediaPlayer
我想禁用导致 Chrome 后退或前进的两指滑动。 我有一个网站,如果用户没有专门保存,他可能会失去工作进度。 我试过使用 window.onbeforeunload但是,如果我在 url 中有哈希值
后退箭头在 Xcode 中损坏? 是否有键盘命令可以一次后退/前进一个文件。 Xcode 3.2更改了 Cmd-Opt 的行为。正如另一个问题中所指出的,它们不像以前版本的 Xcode 那样在文件级
我有这些复选框 Menu Filters Select All Unselect All Vegan Vegetar
我想在按下返回按钮时将我当前的 flutter 页面重定向到主页,将重定向。当我按返回按钮时,主页/ Activity 应开始。我在主页中有多种选择,在当前页面中,如果用户不想选择它们,我可以显示眼睛
按住下一个按钮时,音频播放器速度加快... 代码代表一切 main question : How to continue to normal ? 这是我的尝试 http://jsfiddle.net/
我是一名优秀的程序员,十分优秀!