制作“滚动潜行”的工作 [英] Making 'scroll-sneak' work
问题描述
我一直在试图让JavaScript代码滚动偷袭（ http://mrcoles.com/blog/scroll-sneak-maintain-position-between-page-loads/ ）现在工作了几个星期。此代码在锚点链接被点击时停止跳页（到顶部），并且不禁用该链接的功能。当下面表格行中的导航链接被点击时，我希望该网页不会移动回到顶部。它在开发人员的演示页面上工作，但没有太好的文档。任何takers这个？
< tr id =tabs>
< th>< a href =index.htm>信息< / a>< / th>
< th>< a href =plan.htm>研究< / a>< / th>
< th>< a href =councils.htm>来源< / a>< / th>
< th>< a href =university.htm>机构< / a>< / th>
< th>< a href =contact.htm>联系人< / a>< / th>
< / tr>
< script>
（function（）{
var sneaky = new ScrollSneak（location.hostname），tabs =
document.getElementById（'tabs'）。getElementsByTagName（'th'），i = len = tabs.length;
for（; i< len; i ++）{
tabs [i] .onclick = sneaky.sneak;
}
document.getElementById next'）。onclick = sneaky.sneak;
}）（）;
< / script>
UPDATE
在我的原始问题（和给出了各种问题和错误描述在下面的意见，接受的答案证明太不可预测的行为），我设法找出一个简单的解决方案，如下所示，在IE6，FF3 ，QZ6和Webkit 537.21。
（function（）{
var sneaky = new ScrollSneak（location.hostname）;
document.getElementById（'tabs'）。onclick = sneaky.sneak;
}）（）;
如果最后一张图片仍然有问题，您可以进行此更改，看看是否有帮助：
替换为：
$（活动）.show（）;
$（active）.siblings（）。hide（）;
使用此项：
$（＃gallery-interior li）。hide（0，function（）{
$（＃gallery-interior+ active）.show（）;
} ）;
上一页
在这里，我结合了从其他答案的脚本和滚动潜行的选项卡。我测试了两个在FF3并验证它们正常工作，这是完整的JavaScript：
var sneaky = new ScrollSneak ）;
$（document）.ready（function（）{
var urlHash = window.location.hash;
if（urlHash）{
$（。thumbs a [href ='+ urlHash +'] img）。addClass（dimmed）;
} else {
$（ -child img）。addClass（dimmed）;
}
$（＃tabs th a b sneaky.sneak（）;
}）;
$（。thumbs a）。on（click，function（e）{
changeImage this）.attr（href），e）;
}）;
$（＃gallery-interior area
changeImage（$（this）.attr（href），e）;
}）;
}
function changeImage（active，e）{
var e = window.event || e;
preventNav（active，e）;
$（。thumbs a img）。removeClass（dimmed）;
$（。thumbs a [href ='+ active +'] img）。addClass（dimming）;
$（active）.show（）;
$（active）.siblings（）。hide（）;
}
function preventNav（hash，e）{
if（e）{
if（typeof e.preventDefault！='undefined'）{
e.preventDefault（）;
} else {
e.returnValue = false;
}
}
var node = $（hash）;
node.attr（id，）;
document.location.hash = hash;
node.attr（id，hash.replace（＃，））;
}
上一页
在这里，这个脚本适应标签。在我为该图库发布的解决方案中（点击锚点链接并保持页面位置/防止页面跳转到顶部？），页面跳转发生，因为哈希链接实际上不重新加载页面，滚动发生默认情况下，必须撤消。这对正常链接不会有相同的跳跃效果，但我离开了捕获哈希链接的能力，以防你需要它。最好是将其放置在网站HTML的底部，就在结束标记之前。
var sneaky = new ScrollSneak（tabs，false）;
var capture = true;
$（document）.ready（function（）{
var urlHash = window.location.hash;
$ a）。on（click，function（e）{
sneaky.sneak（）;
capture = true;
}）;
capture = false;
}）;
window.onscroll = function（）{
if（capture）sneaky.scroll（），capture = false; //这部分只需要哈希链接
};
I've been trying to make the javascript code 'scroll-sneak' (http://mrcoles.com/blog/scroll-sneak-maintain-position-between-page-loads/) work for a few weeks now. This code stops the 'page jump' (to the top) when an anchor link is clicked, and does so without disabling the functionality of that link. I'd like to have the page not move back to the top when a navigation link in a table row below is clicked. It works on the developer's demo page, but is none too well documented. Any takers for tacking this?
<tr id="tabs">
<th><a href="index.htm">Information</a></th>
<th><a href="plan.htm">Research</a></th>
<th><a href="councils.htm">Sources</a></th>
<th><a href="university.htm">Institution</a></th>
<th><a href="contact.htm">Contact</a></th>
</tr>
<script>
(function() {
var sneaky = new ScrollSneak(location.hostname), tabs =
document.getElementById('tabs').getElementsByTagName('th'), i = 0, len = tabs.length;
for (; i < len; i++) {
tabs[i].onclick = sneaky.sneak;
}
document.getElementById('next').onclick = sneaky.sneak;
})();
</script>
UPDATE
In terms of my original question (and given the various problems and bugs described in the Comments below, the accepted answer proving too unpredictable in behaviour), I managed to figure out a simple solution, as below, that works in IE6, FF3, QZ6 and Webkit 537.21.
(function() {
var sneaky = new ScrollSneak(location.hostname);
document.getElementById('tabs').onclick = sneaky.sneak;
})();
One more edit:
If the last image is still giving you trouble, you can make this change and see if it helps:
Replace this:
$(active).show();
$(active).siblings().hide();
With this:
$("#gallery-interior li").hide(0, function(){
$("#gallery-interior " + active).show();
});
Previous
Here, I combined the script from the other answer and the scroll-sneak for the tabs. I tested both in FF3 and verified that they work properly, this is the complete JavaScript:
var sneaky = new ScrollSneak("scrolltrack");
$(document).ready(function() {
var urlHash = window.location.hash;
if(urlHash) {
$(".thumbs a[href='" + urlHash + "'] img").addClass("dimmed");
} else {
$(".thumbs a:first-child img").addClass("dimmed");
}
$("#tabs th a").on("click", function(e) {
sneaky.sneak();
});
$(".thumbs a").on("click", function(e) {
changeImage($(this).attr("href"), e);
});
$("#gallery-interior area").on("click", function(e) {
changeImage($(this).attr("href"), e);
});
});
function changeImage(active, e) {
var e = window.event || e;
preventNav(active, e);
$(".thumbs a img").removeClass("dimmed");
$(".thumbs a[href='" + active + "'] img").addClass("dimmed");
$(active).show();
$(active).siblings().hide();
}
function preventNav(hash, e) {
if (e) {
if (typeof e.preventDefault != 'undefined') {
e.preventDefault();
} else {
e.returnValue = false;
}
}
var node = $(hash);
node.attr("id", "");
document.location.hash = hash;
node.attr("id", hash.replace("#", ""));
}
Previous
Here you go, this script is adapted to the tabs. In the solution I posted for the gallery (Click anchor link and keep page position / prevent page-jump to top?), the page jump happens because hash links don't actually reload the page and scrolling happens by default and has to be undone. This won't have the same jumping effect for normal links, but I left the ability to capture hash links as well in case you need it. It would be best if this were placed at the bottom of the HTML of your site, just before the closing body tag.
var sneaky = new ScrollSneak("tabs", false);
var capture = true;
$(document).ready(function() {
var urlHash = window.location.hash;
$("#tabs th a").on("click", function(e) {
sneaky.sneak();
capture = true;
});
capture = false;
});
window.onscroll = function () {
if (capture) sneaky.scroll(), capture = false; // This part is only needed for hash links
};
这篇关于制作“滚动潜行”的工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
