`
yanyanquan
  • 浏览: 451120 次
  • 性别: Icon_minigender_1
  • 来自: 江门
社区版块
存档分类
最新评论

关于‘TOP’置顶链接

    博客分类:
  • W3C
 
阅读更多

 

方案一:在合适的地方,手动加入一个或多个‘TOP’链接。

 

这是最原始的做法了,如果滚动太快,验,那就是我们给用户用脚本实现一下缓冲效果,而不是直接飙到顶部。

 

<a id="gototop" href="javascript:void(0);" onclick="goTop();return false;">Top of Page</a>

 

 

function goTop(acceleration, time) {

 acceleration = acceleration || 0.1;

 time = time || 16;

 

 var x1 = 0;

 var y1 = 0;

 var x2 = 0;

 var y2 = 0;

 var x3 = 0;

 var y3 = 0;

 

 if (document.documentElement) {

  x1 = document.documentElement.scrollLeft || 0;

  y1 = document.documentElement.scrollTop || 0;

 }

 if (document.body) {

  x2 = document.body.scrollLeft || 0;

  y2 = document.body.scrollTop || 0;

 }

 var x3 = window.scrollX || 0;

 var y3 = window.scrollY || 0;

 

 // 滚动条到页面顶部的水平距离

 var x = Math.max(x1, Math.max(x2, x3));

 // 滚动条到页面顶部的垂直距离

 var y = Math.max(y1, Math.max(y2, y3));

 

 // 滚动距离 = 目前距离 / 速度, 因为距离原来越小, 速度是大于 1 的数, 所以滚动距离会越来越小

 var speed = 1 + acceleration;

 window.scrollTo(Math.floor(x / speed), Math.floor(y / speed));

 

 // 如果距离不为零, 继续调用迭代本函数

 if(x > 0 || y > 0) {

  var invokeFunction = "goTop(" + acceleration + ", " + time + ")";

  window.setTimeout(invokeFunction, time);

 }

}

 

 

方法2:

 <a href="#top" id="gototop" >Top of Page</a>


分享到:
评论

相关推荐

    菜单置顶swiperjq锚链接

    当我们需要在网页上实现“菜单置顶”功能并结合Swiper.js和jQuery的锚链接功能时,就涉及到一系列的技术细节和步骤。 首先,菜单置顶通常指的是将导航栏固定在页面顶部,即使用户滚动页面,导航栏始终保持可见。这...

    Window On Top(窗口置顶设置工具)V3.9 汉化特别版

    首先,Window On Top的窗口置顶功能非常灵活。用户可以自由选择将任何程序窗口设置为始终在其他窗口之上显示,这样即便打开新的应用程序或者文档,选定的窗口也会保持在最前端,避免了频繁调整窗口位置的麻烦。这一...

    窗口置顶软件

    压缩包内的"Top.exe"文件很可能是这款窗口置顶软件的可执行程序,它是软件的核心部分,包含了实现窗口置顶功能的所有代码和资源。运行这个文件,软件就会启动并提供服务。而"使用方法.txt"则是一个文本文件,里面...

    悬浮置顶

    由于提供的链接指向了一个博客文章,可能在该文章中会详细介绍如何实现这一效果。 总之,悬浮置顶是通过CSS和JavaScript配合实现的一种交互效果,它利用了CSS的定位属性和JavaScript的事件监听及DOM操作。在实际...

    jquery导航置顶.zip

    通常,一个简单的导航栏包括一个`&lt;nav&gt;`元素,里面包含一系列链接组成的`&lt;ul&gt;`列表: ```html &lt;li&gt;&lt;a href="#"&gt;首页&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;关于我们&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;服务项目&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a...

    跟随置顶导航条 js例子代码

    1. **HTML结构**:创建一个包含导航链接的`&lt;nav&gt;`元素。例如: ```html &lt;li&gt;&lt;a href="#section1"&gt;Section 1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#section2"&gt;Section 2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#section3"&gt;Section 3&lt;/a&gt;&lt;/li...

    窗口置顶工具

    然而,窗口置顶工具通过注入自定义的动态链接库(DLL,如lpk.dll)并调用特定的API函数,可以改变这种默认行为,使得用户能够自定义哪些窗口始终保持在最前端。例如,`lpk.dll`可能是这个工具实现置顶功能的关键组件...

    易语言窗口置顶源码.7z

    其中,`hWnd`是你要置顶的窗口句柄,`hWndInsertAfter`通常设为`HWND_TOP`表示置顶,`X`和`Y`是窗口的新位置,`cx`和`cy`是窗口的新大小,`uFlags`是一些附加标志,可以用来控制窗口的其他属性。 在易语言中,获取...

    jquery悬浮微信二维码微博分享置顶特效

    4. **置顶特效(Stick-to-top Effect)**:与悬浮类似,置顶特效是指元素在页面滚动时始终保持在屏幕顶部。这通常结合JavaScript和CSS的`position: sticky`实现,当元素达到特定位置时,它会自动固定在顶部。 5. **...

    php实现文章置顶功能的方法

    在获取文章列表时,应先按照 `flag` 字段降序排序(置顶的文章优先),然后再按照 `top` 字段降序排序(置顶时间晚的文章优先),最后按照默认的 `id` 字段降序排序。这样,置顶的文章就会出现在列表的前面。 ```...

    jQuery页面滚动导航栏悬浮置顶特效源码.zip

    《jQuery页面滚动导航栏悬浮置顶特效实现详解》 在网页设计中,为了提供良好的用户体验,导航栏通常需要在页面滚动时保持固定在顶部,这种效果被称为“悬浮置顶”或者“固定定位”。jQuery,一个广泛使用的...

    导航条置顶 不随滚动条滚动而改变.zip

    在网页设计中,导航条(Navigation Bar)是用户界面中的重要元素,它通常包含网站的主要链接,帮助用户在页面间快速切换。"导航条置顶 不随滚动条滚动而改变"是一个常见的网页布局技巧,目的是使导航条在用户滚动...

    js 网页返回顶部 置顶返回

    在网页设计中,"js 网页返回顶部 置顶返回" 是一个常见的功能需求,它允许用户轻松地将浏览器滚动到页面的顶部,提高用户体验。这一功能主要通过JavaScript实现,因为JavaScript是一种强大的客户端脚本语言,可以与...

    导航停靠置顶

    实现导航停靠置顶,首先需要在HTML文档中创建一个包含导航链接的容器,例如: ```html &lt;li&gt;&lt;a href="#home"&gt;首页&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#about"&gt;关于我们&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#services"&gt;服务&lt;/a&gt;&lt;/li&gt;...

    jquery实现的鼠标下拉滚动置顶效果

    // 阻止链接默认行为 $(document.documentElement).animate({ scrollTop: 0 // 返回页面顶部 }, 200); // 动画持续时间200毫秒 $(document.body).animate({ scrollTop: 0 }, 200); }); ``` 4. CSS样式控制 ...

    AlwaysOnTopMaker.zip

    在这个例子中,可能是“绿盟”的官方网站,用户可以通过这个链接了解更多关于开发者的信息,获取更新,或者查找其他相关软件。 综上所述,“AlwaysOnTopMaker”是一个方便实用的窗口置顶工具,具备快捷键操作和窗口...

    jQuery实现表格行上移下移和置顶的方法

    - 置顶操作则是监听具有.top类的元素的点击事件,实现方式是将选中的行添加到表格的最前面,并给予特殊的样式,这里使用了prepend()方法来实现。 代码中用到了一些jQuery的基础方法,比如parents()用于获取当前元素...

    jquery导航置顶特效代码

    还要为“置顶”状态添加额外样式,如`position: fixed`和`top: 0`。 4. **编写jQuery代码**:在`$(document).ready()`函数内,监听窗口滚动事件,并根据滚动位置判断是否应用置顶效果。例如: ```javascript $...

    仿携程主页菜单栏滚动置顶&条件筛选之多个单选弹出

    top: 0; width: 100%; z-index: 999; /* 确保菜单栏在其他元素之上 */ } ``` 其次,条件筛选功能涉及动态显示和隐藏内容。在JavaScript或jQuery中,可以监听点击事件,当用户点击某个按钮或链接时,弹出相应的...

    jQuery阅读进度条导航置顶特效

    在"jQuery阅读进度条导航置顶特效"中,导航栏不仅具有常规的链接功能,还结合了进度条,提供了一种独特的视觉反馈,让用户了解他们的阅读进度。 实现这个特效,开发者需要考虑以下步骤: 1. **初始化进度条**:在...

Global site tag (gtag.js) - Google Analytics