页内跳转到指定位置-有过渡动画

一般页内跳转，像：锚点，scrollTo，location.hash正常情况下都是直接跳转的，没有动画，如果我们想要添加动画，就需要采取优化或其他办法。不多说，看下面。

今天用了三种方法，分别是scrollTo、自定义function和jQuery链式的方法，个人推荐第一种，因为非常简单，后续如果还有，会继续补充。

window.scrollTo中可以配置过渡效果，它本身是瞬间跳转到某一位置(即behavior:‘instant‘)，只需要在他的对象中配置behavior:‘smooth‘就可以了,简单快捷。

第二种方法就是自定义一个组件，这边我写下来一个思路你们自己参考。(19/09/06撰)

　　首先你可以获取当前滚动条位置和需要跳转的位置。

　　设置定时器，间隔多长时间触发一次，然后你需要加一个判断，是进行向上滚动还是向下滚动，即当前位置大于跳转位置，还是小于跳转位置。

　　如果是向下滚动，将当前滚动条位置加上一个数字，然后执行一次window.scrollTo()；如果向上滚动就减少一个数字，然后执行window.scrollTo()；

　　最后判断当前滚动条位置是否大于(小于)需要跳转的位置，如果大于(小于)清除定时器，否则继续执行。

　　

　最后一种方式，也很方便，就是通过jQuery的链式调用，在跳转的同时加上一个动画和时间就可以了。

　　

　　欢迎进店观光，谢谢！！

原文地址：https://www.cnblogs.com/dongxiaoer/p/11474090.html

时间： 2024-10-06 01:10:20

页内跳转到指定位置-有过渡动画的相关文章

实现页内跳转定位到某个ID

<!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> <meta http-equiv="Content-

TinyMCE主题的文章目录没法点击页内跳转

我想改一下reacg这个粉嫩博客的配置:TinyMCE主题的文章目录没法点击页内跳转. 小菜鸟,思路:去学习BNDong大神 怀疑是这两个和文章目录有关 Cnblogs-Theme-SimpleMemory/src/script/marvin.nav2.js / $(document).ready(function () { var b = $('body'), c = 'cnblogs_post_body', d = 'sideToolbar', e = 'sideCatalog', f =

asp.net在同一页面跳转到指定位置

方案一 location.hash = "#ID" location.hash 可以在同一页面跳转到指定的位置. 页面没有缓冲,一下子就到了指定位置,很突兀 方案二 var hr = $("#ID"); var anh = $(hr).offset().top; $("html,body").stop().animate({ scrollTop: anh }, 2000); 页面平缓的滑到指定的位置,2000毫秒 #ID里面是要滑到的位置.

如何用jquery实现点击后跳到页面指定位置

很多网站都有这种功能,主要为了让用户在长篇大论中比较迅速的跳到自己想要看的内容处,比如bootstrap就有相应的功能. 介绍一种非常简便可以实现这种功能的方式. 思路:1.这里要用到点击事件,因为点击处可能数量较多,因此最好用事件代理来处理,可以提高性能. 2.当点击一个按钮时,能够获取到与他相对应的元素的ID. 3.通过jquery的offset方法返回top和left两个属性后获取他的top属性. 4.用animate方法改变html的scrollTop属性,值为上面的top属性值. 以下

页面内跳转到相应位置的3种方法

首先设置所需的css和html 设置css .demo{ width: 200px; height: 200px; border: 1px red solid; margin-bottom: 100px; margin-right: 50px; } .btn{ position: fixed; right: 0; top: 20px; background-color: #0000cc; color: #ffffff; } 设置html <div class="demo">

html &lt;meta&gt;设置自动刷新或者几秒内跳转到指定页面

指定时间自动刷新: <meta http-equiv="refresh" content="2"/> 指定时间跳转到指定页面: <meta http-equiv="refresh" content="5;URL=http://www.baidu.com"/>

DIV内滚动条滚动到指定位置

相对浏览器,将指定div滚到到指定位置,其用法如下: $("html,body").animate({scrollTop: $(obj).offset().top},speed); ps:obj是需要定位的对象,speed是滚动的速度 然而如果需要相对某一个容器(称之div1),将其内部的div2滚动到相对div1的指定位置,用法如下: $("div1").animate({scrollTop: $("div2").position().top}

使用target属性跳转到指定位置

先上代码,使用frameset将网页分割为三个窗口,上,左和右. 1 <html> 2 <head> 3 <title>Main</title> 4 <meta content = 'text/html'; charset = 'utf-8'> 5 </head> 6 <frameset rows = '15%, *'> 7 <frame src = 'top.html'> 8 <frameset col

博客园--页内跳转

MarkDown实现 生成目录的方法: // mycode在当前页面是唯一的命名 [点击跳转](#mycode) <span id="mycode">跳转到的地方</span> // span或者a标签均可 h2做标题 1.语法示例 1.1图片 1.2换行 1.3强调 在正文中,只要将章节标题的id对应上去即可: 1.语法示例 强调 原文地址:https://www.cnblogs.com/oklizz/p/11405644.html