基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码

时间:2022-09-03 12:37:53

比如 想跳到 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&quot ...

  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. Windows Installer 服务启动错误 14007 的解决办法

    问题: 在 本地计算机 无法启动 Windows Installer 服务. 错误代码 14007: 在活动的激活上下文中没有找到任何查找密钥. 这个问题似乎涉及到 Windows Installer ...

  2. java根据标点英文分词

    最近学习java字符串部分,用正则表达式做了一个简单的统计单词出现次数的小程序,目前只能统计英文. 整个程序包括三个包,分别为output,run,wordcount wordCount包 执行单词统 ...

  3. JavaScript定时器

    定时器 开启定时器 Setinterval间隔型    每隔一段时间重复的执行 SetTimeout延时型   只执行一次 两种定时器的区别 <!DOCTYPE html> <htm ...

  4. 4分钟了解nano编辑器和简单命令 2015&period;10&period;6

    nano感觉并不常用,但是偶尔遇到过几次. nano命令是一个类似VI的编辑器,但是更简单,其中的i,a等命令似乎可以用,但是有些命令不可以用.保存和退出最大的区别在于退出方式,如果你要保存所做的修改 ...

  5. linux进程监控,monitor脚本

    由于服务器上一些进程莫名的挂掉,需要些一个monitor的bash脚本来监控这些进程: #! /bin/bash #chkconfig info ### BEGIN INIT INFO # Provi ...

  6. MD5加密Java实现

    package cn.mldn.util; public class MD5Code { /* * 下面这些S11-S44实际上是一个4*4的矩阵,在原始的C实现中是用#define 实现的, 这里把 ...

  7. uva 10271

    DP  状态转移方程 dp[i][j] = min(dp[i-1][j], dp[i-2][j-1] + w)) dp[i][j] 指的是前i个筷子组成j组所花费的最小值 考虑第i个筷子是否参与第j组 ...

  8. 开涛spring3&lpar;4&period;4&rpar; - 资源 之 4&period;4 Resource通配符路径

    4.4.1  使用路径通配符加载Resource 前面介绍的资源路径都是非常简单的一个路径匹配一个资源,Spring还提供了一种更强大的Ant模式通配符匹配,从能一个路径匹配一批资源. Ant路径通配 ...

  9. &period;Net Core部署到CentOS

    本文基于初次或再次尝试部署.Net Core应用到Linux服务器上,我尝试后自我总结的经验一个简单的Demo,尝试部署在Linux服务器上和跨服务器访问数据库. 一.环境介绍 1.本地使用Visua ...

  10. 什么是&lt&semi;&excl;DOCTYPE html&gt&semi;

    什么是<!DOCTYPE html>? 在HTML文档初,往往会有这么一句话<!DOCTYPE html>,那么它的意义是什么呢?它是html5标准网页声明,全称为Docume ...