wil*_*ter 3 html javascript css
问题是我有一个带锚点的网页,我想顺利滚动到它.所以我环顾四周找到了这段代码.
//dezinerfolio
eval((function(){a="Scroller={speed:10,8dC.;d.while(dC.+C.}} J8N;d=5;&&M4M}d&&dM4dM}%4%} 0J8a,F4(F,fa@7a.4a.LP+F7Jend8e66.cancelBubble=true;6.Value=fa@;}&&(E(7J8di=Hner3||5.G3;hN.3;a=(Ed>ah-d>i7e@{-(h-d)7}e@{a=a+(d-a}To(0,aEa==a}=aJHit8KwHdow,A,A7,A82P;l=9;d=locatiP;D&&D.HdexOfL#)!=-1&&(l/+l=C)Kl,Gck,endEl.PGck=2l=this.hash.substr(1E9.name==l;i=setILL+(9)+),107}}}}}};Hit()",b=48;while(b>=0)a=a.replace(new RegExp("%23456789@ACDEFGHJKLMNP".charAt(b),"g"),("\042Scroller.entfunction(offsetParscrollwindow.returndocumattachEvntervala=.getElemsByTagName(a);if(offsetTop){for(i=0;i<a.length;i++.pathnamea+=Math.ceil((d-ae.stopPropagationTopa.addEvListenerbody)/speede.prevDefaultclearI(i)pageYOffsetend(this);Height .Elemev)}:a[i]lseload=dl.href);b,dcliin},((.=.=C||on".split(""))[b--]);return a})())
所以这适用于我的所有网站,所以我相信它可以在我的新网站上运行,但它不起作用.谁能明白为什么不呢???
这是HTML
<head>
<script src="smooth.pack.js" type="text/javascript"></script>
<script> Scroller.speed=7; </script>
</head>
然后
<body>
<a href="#bottom" id="down1" class="down" style="display:block"></a>
然后大约一半的页面.
<a name="bottom" id="bottom"></a>
</body>
这是链接的CSS.
#down1 {
position:absolute;
width:100%;
height:50%;
top:50%;
cursor: url(d.png), auto;
z-index:99;
}
所以我知道这确实有效,因为我看到它在其他网站上运行.但不确定问题是什么???
任何帮助表示赞赏.
谢谢
我建议不要使用该脚本并使用jQuery.这可以通过jQuery轻松完成.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
<body>
<a href="#bottom" id="down1" class="down" style="display:block"></a>
....
<a name="bottom" id="bottom"></a>
<!-- load jquery however you like I will load from Google CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
// Document ready shorthand statement
$(function() {
// Select link by id and add click event
$('#down1').click(function() {
// Animate Scroll to #bottom
$('html,body').animate({
scrollTop: $("#bottom").offset().top }, // Tell it to scroll to the top #bottom
1000 // How long scroll will take in milliseconds
);
// Prevent default behavior of link
return false;
});
});
</script>
</body>
</html>
编辑:
好的,发现你的代码有问题,这是你的CSS.在你的CSS中你有
html, body { overflow-x: hidden; }
改变这个:
body { overflow-x: hidden; }
还有一种更简单的方法来编写jQuery,以便减少代码.
首先,您需要稍微重新构建HTML
在您的链接部分中,将链接的href更改为您希望它们链接到的div的ID,例如:
<a href="#Portfoilio" class="link" id="down1" class="down" style="display:block"></a>
将改为:
<a href="#bottom" id="down1" class="down link" style="display:block"></a>
你也会看到我添加了第二课"链接".这样我们就可以通过一个jQuery调用来定位每一个.
而你底部的jQuery会改为:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
// Document ready shorthand statement
$(function() {
$('.link').click(function() {
var id = $(this).attr('href');
$('html,body').animate({ scrollTop: $(id).offset().top }, 'slow');
// Prevent default behavior of link
return false;
});
});
</script>
以下是我如何更改HTML和jQuery的链接:http: //pastebin.com/0LfyjNLx
| 归档时间： |
|
| 查看次数： |
11541 次 |
| 最近记录： |