比如 想跳到 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的从一个页面跳转到另一个页面的指定位置的实现代码的更多相关文章

  1. jsp中点击一个图片跳转到另一个页面的方法

    1.这是jsp页面中的关于图片的那段代码 <img src="images/tj1.png " id="tj1"></img> 2.跳转 ...

  2. vue滚动行为控制——页面跳转返回上一个页面保留滚动位置

    需求分析: 一般这个功能在后台管理系统用的比较多,因为后台页面都是在当前页面打开,对于某些列表筛选页,如果列表数据比较多,页面就会滚动.当页面发生滚动,对列表数据进行查看或者编辑的时候,跳转到下一级页 ...

  3. windowsphone开发页面跳转到另一个dll中的页面

    WP的页面跳转一般是只能跳转到本DLL的页面, 如果要跳转到其他DLL的页面则需要这样写 (Application.Current.RootVisual as PhoneApplicationFram ...

  4. Jquery 实现input回车时跳转到下一个input元素

      /** * 回车时跳转到下一个元素 * @Author HTL * @DateTime 2016-12-30T11:33:25+0800 * @param {[type]} $input [INP ...

  5. vue从一个组件跳转到另一个组件页面router-link的试用

    需求从helloworld.vue页面跳到good.vue页面 1.helloworld.vue页面代码 <template> <div class="hello" ...

  6. iframe框架下的某一页面跳转到另外一个页面

    //iframe只在当前页跳转 window.location = "/Admin/Blog/Index"; 只在当前页跳转 而不是整个页面都跳转

  7. Jsp页面跳转和js控制页面跳转的几种方法

    Jsp 页面跳转的几种方法 1. RequestDispatcher.forward() 在服务器端起作用,当使用forward()时,Servlet engine传递HTTP请求从当前的Servle ...

  8. 由一个activity跳转到另一个activity

    定义一个按钮,当点击的时候跳转到另一个activity的界面 1.新建第二个activity 2.在第二个Java源码处继承第一个activity,导入 3.在source中复写Oncreat方法 4 ...

  9. 【原创】Android 从一个Activity跳转到另外一个Activity

    Android四大组件activity使用,实现两个activity之间的跳转 基本流程:创建两个activity-将其中一个activity中组件作为事件源-通过组件事件的处理借助intent对象实 ...

随机推荐

  1. C/C++ 中嵌入 arm 汇编

    GCC编译器支持直接在C或者C++代码中,嵌入ARM汇编代码.其基本格式非常简单,大致如下: __asm__ [__volatile__] ( assembler template : [output ...

  2. cmd命令窗口连接mysql的命令大全

    连接:mysql -h主机地址 -u用户名 -p用户密码 (注:u与root可以不用加空格,其它也一样)断开:exit (回车) 创建授权:grant select on 数据库.* to 用户名@登 ...

  3. [HAOI 2015]按位或

    Description 题库链接 刚开始你有一个数字 \(0\) ,每一秒钟你会随机选择一个 \([0,2^n-1]\) 的数字,与你手上的数字进行或( \(\text{or}\) )操作.选择数字 ...

  4. 如何参与linux内核开发

    如何参与linux 内核开发   如果想评论或更新本文的内容,请直接联系原文档的维护者.如果你使用英文 交流有困难的话,也可以向中文版维护者求助.如果本翻译更新不及时或者翻 译存在问题,请联系中文版维 ...

  5. [转]angular2之@Output() EventEmitter

    本文转自:https://www.jianshu.com/p/f2768f927c86 A src/app/components/contains/contain1.ts import { Compo ...

  6. T-SQL:CTE用法(十)

    CTE 也叫公用表表达式和派生表非常类似 先定义一个USACusts的CTE WITH USACusts AS ( SELECT custid, companyname FROM Sales.Cust ...

  7. [PHP] 数据结构-单链表头插法PHP实现

    1.创建头结点 2.创建新结点 3.新结点next指向头结点next 4.头结点next指向新结点 <?php class Node{ public $data; public $next; } ...

  8. [Laravel] Laravel的基本数据库操作部分

    [laravel] laravel的数据库配置 找到程序目录结构下.env文件 配置基本的数据库连接信息 DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=blog ...

  9. FireFox升级后FireBug不能使用

    今天发现,火狐浏览器从49.0.2升级到50.0.2之后,firebug的js调试被禁用了,果断去找49.0.2的版本. 链接: https://ftp.mozilla.org/pub/firefox ...

  10. 【原】Dubbo 多版本号过渡

    之前发过一篇因为接口规范的问题导致其它端出现服务不可用的文章(http://www.cnblogs.com/zdd-java/p/8612763.html),然而最近在查阅了dubbo官方指南文档才知 ...