使用JS实现页面内跳转的两种方式

第一种方式是直接使用锚点配合链接标签:

<h2 id="h2-anchor">Scroll to here</h2>

<a href="#h2-anchor">Jump to H2</a>

现在大多数实现都采用该种方式。但是这种方式没有动画效果,跳转是直接发生的。

第二种方式使用jQuery中的animate方法实现:

var target= $('#h2-anchor').offset().top;

$('body').animate({scrollTop:target}, 300);

这种方式跳转的过程更自然。

时间: 2024-10-24 13:43:24

使用JS实现页面内跳转的两种方式的相关文章

JS实现页面内跳转

使用js($.ajax中)实现页面内跳转(即:描点平滑跳转)的方法(aa为跳转目的标签的id): 在网络上有很多资料所说的:animate方法我试了并不好使,不知道是啥原因,欢迎大家指正,附上网络方法: 1 var oneTop = $("#aa").offset().top; 2 jQuery("html", "body").animate({ scrollTop: oneTop }, 0); 经过测试,如果不需要有滑动动画的话,可使用下面的语

利用intent跳转的两种方式(有无参数返回)

从一个activity跳转到另一个activity有两种方式,一种是无参数返回的,一种是有参数返回的: 1,无参数返回 Intent  intent=new   intent(this,activity.class) this.startActivity(intent); 2,有参数返回 Intent  intent=new   intent(this,activity.class); this.startActivityForResult(Intent,requestCode); 复写onAc

web项目中实现页面跳转的两种方式

<a href="javascript:"></a>跳转在网页本身,URL不改变 <a href="#"></a> 跳转在网页本身,URL 改变 java web项目中实现页面跳转的主要方式有两种:第一种,<% response.sendRedirect("index.jsp");%>第二种<jsp:forward page="index.jsp"/>我做

js实现页面跳转的两种方式

CreateTime--2017年8月24日08:13:52Author:Marydon 方式一: window.location.href = url 说明:我们常用来在js中实现页面跳转的方法,使用get方式发送请求,传参有限 更多介绍,见文章:js操作当前窗口 方式二: 通过POST请求实现页面跳转 /** * 发送POST请求跳转到指定页面 * @param URL * 跳转路径 * @param PARAMS * 参数:格式-JSON对象 */ function httpPost(UR

Vue路由实现页面跳转的两种方式(router-link和JS)

Vue.js 路由可以通过不同的 URL 访问不同的内容,实现多视图的单页 Web 应用 1.通过 <router-link> 实现 <router-link> 组件用于设置一个导航链接,切换不同 HTML 内容 使用方法: 简单写法 <router-link to="demo2">demo2</router-link> 使用 v-bind 的写法 <router-link :to="'demo2'">de

vue 页面跳转的两种方式

1,标签跳转     <router-link to='two'><button>点我到第二个页面</button></router-link> 2,点击事件跳转    html : <button @click="hreftwo" class="test-one">点我到第二个页面</button>   js : methods:{ //跳转页面 hreftwo(){ this.$router

vue路由跳转的两种方式

query和params区别 query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传, 密码之类还是用params刷新页面id还在 params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失 一 . 声明式 router-link (利用标签跳转) 1.0 不带参数 形如:http://localhost:3000/#/home/newslist 2 3 // router.js 路由配置 4 { path: '

解决使用angularjs时页面因为{{ }}闪烁问题的两种方式ngBind,ngCloak

1.HTML加载含有{{ }}语法的元素后并不会立刻渲染它们,导致未渲染内容闪烁(Flash of Unrendered Content,FOUC).我可以用ng-bind将内容同元素绑定在一起避免FOUC.内容会被当作子文本节点渲染到含有ng-bind指令的元素内. 2.除使用ng-bind来避免未渲染元素闪烁,还可以在含有{{ }}的元素上使用ng-cloak指令,ng-cloak指令会将内部元素隐藏,直到路由调用对应的页面时才显示出来.   下面主要演示下如何通过ng-cloak避免FOU

页面跳转两种方式

在界面显示过程用,一般都是通过用户提交页面请求到Servlet,在通过Servlet处理后跳转到相应的界面,进行数据的显示.一般页面跳转有两种方式,分别是重定向(response.sendRedirect)和转发(request.getRequestDispatcher).下面分别来看这两种方式是如何进行实现的(以下代码是在Servlet中进行页面跳转操作的): 1.重定向(response.sendRedirect)方式 ItemManager itemManager=new ItemMana