从一个页面跳转到另一个页面的指定位置(带平滑移动的效果)

本文介绍了一种在网页中实现平滑滚动到指定锚点的方法。通过JavaScript获取URL中的参数,并利用jQuery的animate方法来实现平滑滚动效果。

从一个页面跳转到另一个页面的指定位置 如果不带平滑移动的效果 很容易 加个 锚点就行了  比如 想跳到 mao.aspx 的页面 的div id="s" 的位置    那么   只用<a href="mao.aspx#s">  就可实现跳转到指定位置

现在为了增加用户体验  跳转到页面后  平滑移动到该位置  怎么做呢  其实也很简单啦  那边传递过来一个 要跳转到哪个div的参数就行

先上一段 页面获取参数的 通用js

  
// 根据参数名获得该参数 pname等于想要的参数名 function getParam(pname) { var params = location.search.substr( 1 ); // 获取参数 平且去掉? var ArrParam = params.split( ' & ' ); if (ArrParam.length == 1 ) { // 只有一个参数的情况 return params.split( ' = ' )[ 1 ]; } else { // 多个参数参数的情况 for ( var i = 0 ; i < ArrParam.length; i ++ ) { if (ArrParam[i].split( ' = ' )[ 0 ] == pname) { return ArrParam[i].split( ' = ' )[ 1 ]; } } } }
复制代码

代码很简单 就是根据当前url 获取其中想要的参数的值

复制代码
  
$( function () { var mao = $( " # " + getParam( " m " )); // 获得锚点 if (mao.length > 0 ) { // 判断对象是否存在 var pos = mao.offset().top; var poshigh = mao.height(); $( " html,body " ).animate({ scrollTop: pos - poshigh - 30 }, 3000 ); } });
复制代码

上面就是平滑移动到 想要的位置     pos-poshigh-30 这个是可以调整的 我是觉得减到30毕竟好~~


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值