全球主机交流论坛

标题: 求助VPS网页代码修改 [打印本页]

作者: Ruclinux 时间: 2012-9-5 07:01
标题: 求助VPS网页代码修改
本帖最后由 Ruclinux 于 2012-9-6 01:40 编辑

下边这个是返回页首顶部的代码，有没有懂的朋友能不能改成可以返回页首和直达底部的代码呢？谢谢了.

<div id="BackTop" style="position:fixed;bottom:60px;right:10px;display:none;cursor:pointer;"><a title="Top" onclick="window.scrollTo(0,0);return false;" href="#top" class="back-top">Top</a><img src="/images/back-top.png"/></div>
<script type="text/javascript">
      idBackTop=document.getElementById('BackTop');
      idBackTop.onclick=function (){
            document.documentElement.scrollTop=0;
            sb();
            }
      window.onscroll=sb;
      function sb(){
            if(document.documentElement.scrollTop==0){
                     idBackTop.style.display="none";
                     }else{
                              idBackTop.style.display="block";
                              }
            }
</script>

我把代码改成这样的无效.

<div id="Gotobottom" style="position:fixed;top:60px;right:10px;display:none;cursor:pointer;"><a title="bottom" onclick="window.scrollTo(0,0);return false;" href="#bottom" class="go-bottom">bottom</a><img src="/images/back-top.png"/></div>
<script type="text/javascript">
      idGotobottom=document.getElementById('Gotobottom');
      idGotobottom.onclick=function (){
            document.documentElement.scrollTop=0;
            sb();
            }
      window.onscroll=sb;
      function sb(){
            if(document.documentElement.scrollTop==0){
                     idBackTop.style.display="none";
                     }else{
                              idGotobottom.style.display="block";
                              }
            }
</script>

作者: Ruclinux 时间: 2012-9-5 07:02
加个 if() ?

作者: 狂奔的蜗牛 时间: 2012-9-5 07:59
标题看不懂

作者: Ruclinux 时间: 2012-9-6 00:14
ABCD大呢？代码折腾帝呢？

作者: Mr.Ra1n 时间: 2012-9-6 00:17
假设，头部的DOM ID为head，底部的DOM ID为foot。
<a href="#head">返回顶部</a><a href="#foot">返回尾部</a>

除了可以用ID，还可以在头尾部加<a name="head"></a><a name="foot"></a>
效果是一样的。

作者: Ruclinux 时间: 2012-9-6 00:19

Mr.Ra1n 发表于 2012-9-6 00:17
假设，头部的DOM ID为head，底部的DOM ID为foot。
返回顶部返回尾部

不懂，能写个实例吗？按照我贴出来的您给改一下也成，谢谢了.

作者: Mr.Ra1n 时间: 2012-9-6 00:26

Ruclinux 发表于 2012-9-6 00:19
不懂，能写个实例吗？按照我贴出来的您给改一下也成，谢谢了. ...

需要JQuery支持，懒得费事写，直接现扒的。

HTML:

<div id="shangxia"><div id="shang"></div><div id="xia"></div></div>

复制代码

CSS:

#shangxia {
position: absolute;
top: 40%;
left: 50%;
margin-left: -540px;
display: block;
}

复制代码

JS:

jQuery(document).ready(function($){
var s=$('#shangxia').offset().top;$(window).scroll(function(){$("#shangxia").animate({top:$(window).scrollTop()+s+"px"},{queue:false,duration:500})});$body=(window.opera)?(document.compatMode=="CSS1Compat"?$('html'):$('body')):$('html,body');$('#shang').click(function(){$body.animate({scrollTop:'0px'},400)});$('#xia').click(function(){$body.animate({scrollTop:$('#footer').offset().top},400)});$('#comt').click(function(){$body.animate({scrollTop:$('#comments').offset().top},400)});

复制代码

作者: Mr.Ra1n 时间: 2012-9-6 00:28

Ruclinux 发表于 2012-9-6 00:19
不懂，能写个实例吗？按照我贴出来的您给改一下也成，谢谢了. ...

记得加分。。。

作者: kaia 时间: 2012-9-6 00:29

<div id="top">
<a class="自己加样式" href="#top" >回到顶部</a>

复制代码

就这么简单啊。。。。

作者: Ruclinux 时间: 2012-9-6 00:35

Mr.Ra1n 发表于 2012-9-6 00:26
需要JQuery支持，懒得费事写，直接现扒的。

HTML:CSS:JS:

首先谢谢了.这个我看过，因为我不想添加JS代码，所以我找了我发的那个.

作者: Ruclinux 时间: 2012-9-6 01:41

<div id="Gotobottom" style="position:fixed;top:60px;right:10px;display:none;cursor:pointer;"><a title="bottom" onclick="window.scrollTo(0,0);return false;" href="#bottom" class="go-bottom">bottom</a><img src="/images/back-top.png"/></div>
<script type="text/javascript">
      idGotobottom=document.getElementById('Gotobottom');
      idGotobottom.onclick=function (){
            document.documentElement.scrollTop=0;
            sb();
            }
      window.onscroll=sb;
      function sb(){
            if(document.documentElement.scrollTop==0){
                     idBackTop.style.display="none";
                     }else{
                              idGotobottom.style.display="block";
                              }
            }
</script>

我把代码改成这样的无效.

作者: Mr.Ra1n 时间: 2012-9-6 12:20

Ruclinux 发表于 2012-9-6 00:35
首先谢谢了.这个我看过，因为我不想添加JS代码，所以我找了我发的那个.

你那个一样有JS。

作者: mix 时间: 2012-9-6 12:45
5L那个最简单了

作者: Ruclinux 时间: 2012-9-6 17:47

Mr.Ra1n 发表于 2012-9-6 12:20
你那个一样有JS。

谢谢了，你的那个要添加JS文件吗？

作者: ineme 时间: 2012-9-6 17:58
看到这么多人写了，我就不写了，这么简单的东西，吼吼吼！

作者: Ruclinux 时间: 2012-9-6 18:20
像这个这样的要怎么弄呢？谢谢 http://bbs.city.tianya.cn/tianyacity/content/59/1/593910.shtml

作者: Ruclinux 时间: 2012-9-6 19:30
还是看得不明白，谢谢大家了.能写个简单的吗？就照着我给的那份能修改吗？

作者: Ruclinux 时间: 2012-9-7 04:24
最近RP可能不太好，抄网上一段代码，一字不漏的添加到文件里后，IE里图片在右边上，firefox15.0里图片却在左边，发布代码的那个网站却没这样的事.清除了firefox缓存后也是如此.

欢迎光临全球主机交流论坛 (https://loc.888543.xyz/)