锚点定位跳转的各种实现方法

最近在做webapp时有几个页面,都需要同一个效果:锚点跳转。我认为,在webapp中做锚点跳转,很别扭,网页中比较常见的方法,但是在手机端运用却不合适,那是那个SB的后台,非得让做成那效果。没办法,谁让人家是老员工了。

使用锚点跳转做的静态页面,没有一点问题,但是经过他加的php后,就不跳转了,坑爹的玩意!在调试过程中,找了好多的锚点跳转的方法,写在这里,一起分享:

//平滑移动到 想要的位置

$(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);

}

});

//根据参数名获得该参数  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]; 

            } 

        } 

}

}

$("html,body").animate({scrollTop: $("#elementid").offset().top}, 1000);

//它代表id为elementid的元素顶端到网页顶端(不是浏览器可视区域顶端)的绝对距离。
$("#elementid").offset().top;

//扩展方法,流畅的滑动
demo:  http://jsfiddle.net/9SDLw/
$(‘a‘).click(function(){
    $(‘html, body‘).animate({
        scrollTop: $( $.attr(this, ‘href‘) ).offset().top
    }, 500);
    return false;
});

// 如果你的元素没有ID,你想用名字来做定位链接,可以使用这个:

$(‘a‘).click(function(){
    $(‘html, body‘).animate({
        scrollTop: $(‘[name="‘ + $.attr(this, ‘href‘).substr(1) + ‘"]‘).offset().top
    }, 500);
    return false;
});

// 为了增强性能,你应该将 $(‘html, body‘) 选择器缓存起来。这样每次点击时就不需要再重新查找了

var $root = $(‘html, body‘);
$(‘a‘).click(function() {
    $root.animate({
        scrollTop: $( $.attr(this, ‘href‘) ).offset().top
    }, 500);
    return false;
});

// 如果你想更新当前页面的URL。在回调里稍微改一下就可以了:

var $root = $(‘html, body‘);
$(‘a‘).click(function() {
    var href = $.attr(this, ‘href‘);
    $root.animate({
        scrollTop: $(href).offset().top
    }, 500, function () {
        window.location.hash = href;
    });
    return false;
});
时间: 2024-10-13 10:59:33

锚点定位跳转的各种实现方法的相关文章

html中设置锚点定位的几种常见方法

1,使用id定位: <a href="#1F" name="1F">锚点1</a> <div name="1F"> <p> 11111111111 </br> 11111111111 </br>11111111111 </br>11111111111 </br>11111111111 </br>11111111111 </br>

Android tabLayout+recyclerView实现锚点定位

原文链接:https://mp.weixin.qq.com/s/L3o2i3WTmg1ScXEYDS8YCg 在上一篇文章 Android 实现锚点定位中,我们介绍了tablayout+scrollView实现的锚点定位,今天我们使用tablayout+recyclerView 来实现同样的效果. 效果图: 实现思路 实现的思路与上一篇文章是一致的: 1.监听recyclerView滑动到的位置,tablayout切换到对应标签 2.tablayout各标签点击,recyclerView可滑动到

1.4.16- HTML之锚点定位

通过创建锚点连接,用户能够快速定位到目标内容,创建锚点连接分为两步: 1.使用<a href= "#id">链接文本</a> 创建链接文本 2.使用相应的id名称标注跳转目标的位置. 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</ti

jQuery实现页面内锚点平滑跳转

平时我们做导航滚动到内容都是通过锚点来做,刷的一下就直接跳到内容了,没有一丝的滚动效果,而且 url 链接最后会有“小尾巴”,就像#keleyi,今天我就介绍一款 jquery 做的滚动的特效,既可以设置滚动速度,又可以在 url 链接上没有“小尾巴”. 效果体验:http://keleyi.com/keleyi/phtml/jqtexiao/37.htm HTML文件代码: <!DOCTYPE html> <html> <head> <meta charset=

html中设置锚点定位的几种常见方法(#号定位)

在html中设置锚点定位我知道的有几种方法,在此和大家分享一下: 1.使用id定位: <a href="#1F">锚点1</a> <div id="1F"> <p> 11111111111 </br> 11111111111 </br>11111111111 </br>11111111111 </br>11111111111 </br>11111111111

关于锚点链接跳转---实例一

作为前端开发人员,对于选项卡或者tab切换,都应该不陌生.都知道其是如何实现.在这里就不多说了. 在这里小码哥想说的是一种纯HTML结构可实现另一种方式的内容切换.那就是利用超链接实现锚点点击跳转.a元素作为一种特殊且非常重要的标签.其不单单体现在地址的链接等等上.其还有一种功能就是依据ID进行定点查找跳转.很神奇吧,,,,,, 其实现原理:1.目标元素得有一个ID值.2.a标签中的href得有和目标元素相同的#+ID值. 废话不多说,直接上实例: HTML部分: <!doctype html>

html 锚点定位

在html中设置锚点定位我知道的有几种方法.在此和大家分享一下: 1.使用id定位: <a href="#1F" name="1F">锚点1</a> <div name="1F"> <p> 11111111111 </br> 11111111111 </br>11111111111 </br>11111111111 </br>11111111111 &

【TRICK】解决锚点定位向下浮动Xpx问题

1. 问题描述 页面滚动后,菜单栏会固定在页头,当锚点定位时,菜单会遮盖部分定位后的内容,所以需要在锚点定位后自动向下漂移Xpx. 2. 解决办法 a. 设定占位锚点,并给占位锚点设置样式,比如 <a href="#test">hehehe</a> <div style="height:400px;width:100%;background:red;"></div> <div id="test"

锚点定位

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html charset=utf-8" /><title>锚点定位</title><style type="text/css"> #thediv,#thediv2,#thediv3,#thediv4 {width:100