锚链接加动画总结

待我称王封你为后i 2022-06-10 00:29 177阅读 0赞

<div id="top" name="top" style="height:3000px;"></div>
    <a href="#top">回顶部</a>

### 方法一 ###

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

### 延伸 ###

$(document).on('click', 'a', function(event){ 
        event.preventDefault();  // 阻止默认事件发生
        $('html, body').animate({
            scrollTop: $( $.attr(this, 'href') ).offset().top
        }, 500);
    });

### 方法二 ###

$('a').click(function(){ 
            $(document).animate({
                      /* 点击对象的锚链接*/
                scrollTop:$(this.hash).offset().top
            },500)
            return false;
        })

#### 如果你的目标元素没有ID，也可以用设置name来链接： ####

$('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，在animate回调中执行即可 ####

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;
    });

发表评论取消回复

表情：

评论列表（有 0 条评论，177人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML网页制作：制作锚点链接

1、锚点链接定义：指我点击页面中的某一个链接(锚点链接)，就会跳到这个页面的指定位置(锚点)。 2、锚点链接的步骤： (1)、设置锚点：<a name="锚点的

比眉伴天荒/ 2023年01月10日 11:58/ 0 赞/ 216 阅读

相关如何删除锚点（链接）的下划线？

本文翻译自：[How to remove the underline for anchors(links)?][How to remove the underline for

深碍√TFBOYSˉ_/ 2022年11月29日 03:14/ 0 赞/ 153 阅读

相关浅谈锚链接（native 嵌套 h5）

native 嵌套 h5 的时候，总是有很多很多的问题，例如：锚点（锚链接）项目有个需求，在native嵌套 h5 的页面，要实现锚链接，想法挺好。代码如下： <

阳光穿透心脏的1/2处/ 2022年08月21日 14:52/ 0 赞/ 170 阅读

相关锚链接加动画总结

<div id="top" name="top" style="height:3000px;"></div> <a href="

待我称王封你为后i/ 2022年06月10日 00:29/ 0 赞/ 178 阅读

相关锚链接跳转

想让页面跳转到指定的地方，这个时候我们可以用到锚链接，锚链接主要有两个部分组成，点击的地方和跳转的地方，点击的地方我们用 <a>标签，其 href 属性和即将跳转的标签的id保

迈不过友情╰/ 2022年04月23日 14:44/ 0 赞/ 298 阅读

相关页面内锚链接跳转

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9f

系统管理员/ 2022年04月16日 01:53/ 0 赞/ 285 阅读

相关什么是HTML超链接？锚链接？

什么是HTML超链接？锚链接？ HTML超链接 1.超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部

àì夳堔傛蜴生んèń/ 2022年02月15日 17:55/ 0 赞/ 313 阅读

相关锚链接加动画

<div id="top" name="top" style="height:3000px;"></div> <a href="

喜欢ヅ旅行/ 2022年01月17日 20:29/ 0 赞/ 308 阅读

相关链接socket加异常

try \{ channel = AmqpClient::Channel::Create("10.10.22.105", 5672, "admin", "1234

偏执的太偏执、/ 2021年12月05日 04:47/ 0 赞/ 195 阅读

相关 Vue锚点链接

锚点链接是我们在开发中经常会用到的一个技术点，常见的常见有，页面内容过多，而我们不希望拿鼠标一直来回滚动，就需要用到锚点链接，以 " 目录 " 的方式来进行对应的跳转。而在

心已赠人/ 2021年09月18日 20:18/ 0 赞/ 453 阅读