首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > ASP >

ASP网站预览时，当网页拉到最下方时会自动跳上去。该如何解决

2014-04-19 
ASP网站预览时，当网页拉到最下方时会自动跳上去。ASP网站预览时，当网页拉到最下方时会自动跳上去。目前只是

ASP网站预览时，当网页拉到最下方时会自动跳上去。
ASP网站预览时，当网页拉到最下方时会自动跳上去。目前只是拉到最下面去时才会跳上去，跳只跳到中间某一处，3秒后就会跳上去，请问什么情况下才会自动跳上去呢？我表示我没有加任务瞄点功能。只是有一个新闻与产品引用时，都是选择最新更新的几个而已。
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="css1.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网站首页</title>
</head>
<!--#include file=conn.asp-->
<%
set rs2 = Server.CreateObject("ADODB.recordset")
rs2.Open "SELECT new_title FROM concent", conn
%>
<body>
<!--#include file=top1.asp-->
<!--#include file=index3.asp-->
<div class="index12">
  <div class="index12-dh" align="center">
    <div class="index12-dh1">
      <div class="index12-dh3">&nbsp;</div>
      <div class="index12-dh4">&nbsp;</div>
  <div class="index12-dh3"><img src="images/dhnew.jpg" width="88" height="25" /></div>
  <div class="index12-dh5"><!--#include file=dhxw1.asp--></div>
  </div>
  <div class="index12-dh2">
  <div class="dhnew2">企业免费服务热线 :?</div>
  <div class="dhnew">1222-455-264</div>
</div>
  </div>
</div>
<div align="center">
<div style="width:1000px;">
  <div>
    <table width="1270" align="center" background="images/serverb.png" class="syn">
      <tr>
        <td width="310"><div>
          <div class="synew">
            <div class="sydiv">摄影设计</div>
            <a href="#"><img src="images/sheying.jpg" alt="ASP网站预览时，当网页拉到最下方时会自动跳上去。该如何解决" width="194" height="121"/> 摄影它以摄影光学、摄影化学和电子技术为基础，在长期实践中形成独特的拍摄体系。</a></div>
        </div></td>
        <td width="310"><div>
          <div class="synew">
            <div class="sydiv">创意设计</div>
            <a href="#"><img src="images/chuangyi.jpg" alt="ASP网站预览时，当网页拉到最下方时会自动跳上去。该如何解决" height="124"/> 以视觉作为沟通和表现的方式，透过图片和文字结合借此作出用来传达想法或讯。</a></div>
        </div></td>
        <td width="310"><div>
          <div class="synew">
            <div class="sydiv">策划设计</div>
            <a href="#"><img src="images/sheji.jpg" alt="ASP网站预览时，当网页拉到最下方时会自动跳上去。该如何解决"/>策略借助一定的科学方法和艺术，为决策、计划而构思、设计、制作策划方案的过程。</a></div>
        </div></td>
        <td width="320"><div>
          <div class="synew">
            <div class="sydiv">服务理念</div>
            <a href="#"><img src="images/server1.jpg" alt="ASP网站预览时，当网页拉到最下方时会自动跳上去。该如何解决" height="130"/>我们将打造百分百的企业服务水平，以为完善客户的要求为目标，以创新引导为辅助。</a></div>
        </div></td>
      </tr>
    </table>
  </div>
  </div>
 <!--#include file=youshi.asp-->
 <div align="center" class="divdh">
  <table width="80%" border="0" cellspacing="0" cellpadding="0" class="divdh1" background="images/anba.jpg">
    <tr>
      <td width="30"></td>
      <td width="102" align="left">项目展示</td>
      <td width="694" align="left">XXXXXXXXXXX    </td>
      <td width="183">    <div class="divdh3">免费热线：XXXXXXXXXXX</div></td>
    </tr>
  </table>
</div>
 <!--#include file=sycp3.asp-->
 <div style="clear:both"></div>
 <div align="center" class="divdh">
  <table width="80%" border="0" cellspacing="0" cellpadding="0" class="divdh1" background="images/anba.jpg">


    <tr>
      <td width="30"></td>
      <td width="101" align="left">新闻资讯</td>
      <td width="695" align="left">XXXXXXXXXXX</td>
      <td width="183"><div class="divdh3">免费热线：XXXXXXXXXXX</div></td>
    </tr>
  </table>
</div>
 <div>
<div class="synewd">
<!--#include file=synew.asp--></div>
</div>
</div>
<!--#include file=bottom.asp-->
</body>
</html>



synew.asp页面：
<!--#include file=conn.asp-->
<%
set rs=server.CreateObject("adodb.Recordset")
sql="Select top 8 new_id, new_title from concent where new_part='公司新闻' order by new_id desc "
rs.open sql,conn,1,1
%>
<%
set rs2=server.CreateObject("adodb.Recordset")
sql="Select top 8 new_id, new_title from concent where new_part='行业新闻' order by new_id desc "
rs2.open sql,conn,1,1
%>
<%
set rs3=server.CreateObject("adodb.Recordset")
sql="Select top 8 new_id, new_title from concent  where new_part='全球新闻' order by new_id desc "
rs3.open sql,conn,1,1
%>
<div align="center">
<div class="synew6">
<div class="synew2">
      <div class="synew3">
        <div class="synew4">新闻中心—企业新闻</div>
<% do until rs.EOF %>
        <div class="synew5"><span style="color:#F00; font-size:20px;"></span><a href='shownews.asp?new_id=<%=rs.fields("new_id")%>' target="_blank">&nbsp;&nbsp;<%=left(rs("new_title"),10)%></a>   <%rs.MoveNext%>
        </div>    
          <%  
loop
rs.close
%>

  </div>
    <div class="synew3">
        <div class="synew4">新闻中心—行业新闻</div>
      <% do until rs2.EOF %>
        <div class="synew5"><span style="color:#F00; font-size:20px;"></span><a href='shownews.asp?new_id=<%=rs2.fields("new_id")%>' target="_blank">&nbsp;&nbsp;<%=left(rs2("new_title"),10)%></a>
          <%rs2.MoveNext%>
      </div>
        <%  
loop
rs2.close
%>
      </div>
      <div class="synew3">
        <div class="synew4">新闻中心—全球新闻</div>
        <% do until rs3.EOF %>
        <div class="synew5"><span style="color:#F00; font-size:20px;"></span><a href='shownews.asp?new_id=<%=rs3.fields("new_id")%>' target="_blank">&nbsp;&nbsp;<%=left(rs3("new_title"),10)%></a>
          <%rs3.MoveNext%>
        </div>
        <%  
loop
rs3.close
conn.close
%>
</div>
</div>
</div>
</div>

我其它引用页面的代码基本雷同，不知道为什么，我一把网页拉到最底处时，就会跳到展品展示处去。如果有鼠标停上方就不会自动跳的
[解决办法]
js实现平滑跳转到锚点(Anchor)
锚点(Anchor)相信很多人都不陌生，它方便访问者在页面的不同位置快速跳转，直接找到自己感兴趣的内容，如果说 RSS 是整个网站的摘要，那锚点就是一个页面的摘要，通常一个页面内容很多的时候，都会用锚点来定位。

　　但是锚点也有个问题，通常点击锚点后，页面会立即跳到目标位置，而本文介绍的方法，实现了锚点(Anchor)间平滑跳转，效果非常不错。

javascript:

<SCRIPT type=text/javascript> 

// 说明 ：用 Javascript 实现锚点(Anchor)间平滑跳转 
// 来源 ：ThickBox 2.1 
// 整理 ：Yanfu Xie [xieyanfu@yahoo.com.cn] 
// 网址 ：http://www.codebit.cn 
// 日期 ：07.01.17 

// 转换为数字 
function intval(v) 
{ 
    v = parseInt(v); 
    return isNaN(v) ? 0 : v; 
} 

// 获取元素信息 
function getPos(e) 
{ 
    var l = 0; 
    var t  = 0; 
    var w = intval(e.style.width); 
    var h = intval(e.style.height); 
    var wb = e.offsetWidth; 
    var hb = e.offsetHeight; 
    while (e.offsetParent){ 
        l += e.offsetLeft + (e.currentStyle?intval(e.currentStyle.borderLeftWidth):0); 


        t += e.offsetTop  + (e.currentStyle?intval(e.currentStyle.borderTopWidth):0); 
        e = e.offsetParent; 
    } 
    l += e.offsetLeft + (e.currentStyle?intval(e.currentStyle.borderLeftWidth):0); 
    t  += e.offsetTop  + (e.currentStyle?intval(e.currentStyle.borderTopWidth):0); 
    return {x:l, y:t, w:w, h:h, wb:wb, hb:hb}; 
} 

// 获取滚动条信息 
function getScroll()  
{ 
    var t, l, w, h; 
     
    if (document.documentElement && document.documentElement.scrollTop) { 
        t = document.documentElement.scrollTop; 
        l = document.documentElement.scrollLeft; 
        w = document.documentElement.scrollWidth; 
        h = document.documentElement.scrollHeight; 
    } else if (document.body) { 
        t = document.body.scrollTop; 
        l = document.body.scrollLeft; 
        w = document.body.scrollWidth; 
        h = document.body.scrollHeight; 
    } 
    return { t: t, l: l, w: w, h: h }; 
} 

// 锚点(Anchor)间平滑跳转 
function scroller(el, duration) 
{ 
    if(typeof el != ’object’) { el = document.getElementById(el); } 

    if(!el) return; 

    var z = this; 
    z.el = el; 
    z.p = getPos(el); 
    z.s = getScroll(); 
    z.clear = function(){window.clearInterval(z.timer);z.timer=null}; 
    z.t=(new Date).getTime(); 

    z.step = function(){ 
        var t = (new Date).getTime(); 
        var p = (t - z.t) / duration; 
        if (t >= duration + z.t) { 
            z.clear(); 
            window.setTimeout(function(){z.scroll(z.p.y, z.p.x)},13); 
        } else { 
            st = ((-Math.cos(p*Math.PI)/2) + 0.5) * (z.p.y-z.s.t) + z.s.t; 
            sl = ((-Math.cos(p*Math.PI)/2) + 0.5) * (z.p.x-z.s.l) + z.s.l; 
            z.scroll(st, sl); 
        } 
    }; 
    z.scroll = function (t, l){window.scrollTo(l, t)}; 
    z.timer = window.setInterval(function(){z.step();},13); 
} 

</SCRIPT> 

<STYLE type=text/css> 
div.test { 
    width:400px; 
    margin:5px auto; 
    border:1px solid #ccc; 
} 
div.test strong { 
    font-size:16px; 
    background:#fff; 
    border-bottom:1px solid #aaa; 
    margin:0; 
    display:block; 
    padding:5px 0; 
    text-decoration:underline; 
    color:#059B9A; 
    cursor:pointer; 
} 
div.test p { 
    height:400px; 
    background:#f1f1f1; 
    margin:0; 
} 

</STYLE>
调用方法：

scroller(el, duration) 

el : 目标锚点 ID 
duration : 持续时间，以毫秒为单位，越小越快

读书人精选
热点排行