从一个页面跳转到另外一个页面我们可以很容易的使用Javascript来实现。但是,这里我们使用Javascript的框架Jquery来实现Jquery页面跳转。比如想跳到 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要好点。
分享到:
相关推荐
从一个页面跳转到另一个页面的指定位置 如果不带平滑移动的效果 很容易 加个 锚点就行了
通过jQuery实现页面内锚点平滑跳转的方法很多,可以通过插件hovertreescroll实现,也可以简单的通过animate方法实现,下面介绍这2种比较简单的方法。
这是一款非常实用的jQuery全屏跟随和可平滑跳转到相应文章段落的导航菜单插件。该菜单插件可跟随屏幕滚动一直处于可见状态,并且点击菜单项后可平滑的跳转到相应的文章段落处。
anchor.js 是简单且有用的 jQuery 插件,为所有本地链接提供一个平滑的动画,然后跳转到页面的任意一个元素。在线演示 标签:anchor
jQuery锚点跳转滚动条平滑滚动一句话代码 代码如下:$(“html,body”).animate({scrollTop: $(“#box”).offset().top}, 1000); 一下是一些jquery的小技巧1. 控制编译结果 代码如下: [removed][removed] <%if ...
一般使用锚点来跳转到页面指定位置的时候,会生硬地立即跳转到指定位置,但是有些时候我们想要平滑地过渡到指定的位置,那么可以使用JQuery简单的实现这个效果: 比如,这里我们将通过点击标签跳转到 id为content的...
很平滑的滚动 很不错的一个效果,当网页拉下的时候渐隐出现
以前介绍过一个用 JS 实现的页面锚点跳转缓冲特效,效果相当不错,可以在同一页面的锚点链接之间实现平滑的滚动,但是 JS 代码相对来说比较冗长,现在好了,只要已经加载了 JQuery,我们就可以用较为简短的代码实现...
在一个JS调用中创建到子导航菜单的平滑跳转,由BucketListly创始人Pete R.创建。Demo演示演示兼容性诸如Chrome,Firefox和Safari等现代浏览器已经由Pete R #Jump To 。在一个JS调用中创建到子导航菜单的平滑跳转由...
jQuery绿色左右平滑自动切换时间轴日期代码
采用锚点进行页面中的跳转的确很方便,但是要想增加网页的效果,可以使用jquery中的animate,实现滚动的一个动作,慢慢的滚动到你想跳转到的位置,从而看起来会非常高大上。 滚动到顶部: 代码如下:$(‘.scroll_top...
jQuery定位滚动导航效果代码是一款很常见的效果,非常实用,滚动滚动条时,导航固定顶部,并且滚动到对应的板块时,当前导航高亮显示,点击导航文字时平滑跳转到对应的板块。
使用js($.ajax中)实现页面内跳转(即:描点平滑跳转)的方法(aa为跳转目的标签的id): 在网络上有很多资料所说的:animate方法我试了并不好使,不知道是啥原因,欢迎大家指正,附上网络方法: var oneTop = $(#...
项目平滑的锚跳跃/滚动这是什么意思单击导航中的链接后,将锚点平滑地跳转/滚动到该页面的另一部分使用简单JavaScript,无需jQuery 通过搜索目标ID(此处为href )自动检测到目标部分此存储库基于: 指导会议于2018...
Ajax导航一个ajax导航插件。 允许: 页面之间的平滑过渡,以及用于加载链接,后退和前进按钮的不同过渡。 页面HTML和Javascript缓存保留滚动位置(使用“后退”按钮时不跳转) 基本设置: < html >< head &...
jQuery定位滚动导航效果代码是一款很常见的效果,非常实用,滚动滚动条时,导航固定顶部,并且滚动到对应的板块时,当前导航高亮显示,点击导航文字时平滑跳转到对应的板块。
添加上一个和下一个 添加指标 添加跳转到特殊索引 添加状态 他妈的下午。 2015.09.02 在里面 用法 查看原始物去吧? 您可以查看源。 基于: jQuery的 move.js 执照 MIT许可证(MIT) 版权所有(c)2014 特此...