• 用jquery实现平滑的页面滚动效果


    通过几句jquery代码实现页面平滑滚动到某一锚点的效果。实现代码来源于https://css-tricks.com/snippets/jquery/smooth-scrolling

    实现的jquery代码如下:

           $('a[href*="#"]:not([href="#"])').click(function() {
                if (location.pathname.replace(/^//, '') == this.pathname.replace(/^//, '') && location.hostname == this.hostname) {
                    var target = $(this.hash);
                    target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
                    if (target.length) {
                        $('html, body').animate({
                            scrollTop: target.offset().top
                        }, 1000);
                        return false;
                    }
                }
            });

    这里我们就先了解一下location对象及它的一些属性:

    location对象属于window对象,包含有关当前url的信息。

    location对象的属性:

       location.href:返回当前页的完整的url;
       location.hostname:返回当前url的主机名;
       location.pathname:返回当前url的路径名(从/开始);
       location.hash:返回一个url的锚部分(从#号开始的部分包括#);
       location.host:返回一个url的主机名和端口;
       location.port:返回一个url服务器使用的端口号;
       location.protocol:返回一个url协议;
       location.search:返回一个url的查询部分(从?号开始);

       例如,当前页面的url是:http://www.cnblogs.com/sapho/p/6022829.html

                那么location.href = “http://www.cnblogs.com/sapho/p/6022829.html”;

                      location.hostname = “www.cnblogs.com”;

                      location.host = “www.cnblogs.com”;

                      location.pathname = “/sapho/p/6022829.html”;

                      location.protocol = “http:

    demo如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>用jquery实现平滑的页面滚动效果</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            body {
                font-family:"Microsoft YaHei";
            }
            ul,li{
                list-style: none;
            }
            a{
                text-decoration: none;
                color: #0a78fa;
            }
            a:hover{
                color: #fa5275;
            }
            #page-wrap {
                max-width: 500px;
                margin: 1rem auto;
                padding: 1rem;
            }
    
            h1, h2 {
                line-height: 1.2;
            }
            h1{
                margin-bottom: 20px;
            }
            p, ul, h2 {
                margin: 0 0 1rem 0;
            }
            p{
                font-size: 14px;
                text-indent:20px;
            }
        </style>
    </head>
    <body>
    <div id="page-wrap">
    
        <h1 id="top">竹文化</h1>
    
        <ul>
            <li><a href="#two">跳转到第二章</a></li>
            <li><a href="#three">跳转到第三章</a></li>
        </ul>
    
        <h2 id="one">第一章</h2>
    
        <p>竹为高大、生长迅速的禾草类植物,茎为木质。分布于热带、亚热带至暖温带地区,东亚、东南亚和印度洋及太平洋岛屿上分布最集中,种类也最多。
            竹枝杆挺拔,修长,四季青翠,傲雪凌霜,倍受中国人民喜爱,有“梅兰竹菊”四君子之一,“梅松竹”岁寒三友之一等美称。
            中国古今文人墨客,嗜竹咏竹者众多。
        </p>
        <p>
            竹文化是汉族劳动人民在长期生产实践和文化活动中,把竹子形态特征总结成了一种做人的精神风貌,如虚心、气节等,
            其内涵已形成汉民族品格、禀赋和精神象征。看到竹子,人们自然想到它不畏逆境,不惧艰辛,中通外直,宁折不屈的品格,
            这是一种取之不尽的精神财富,也正是竹子特殊的审美价值。
        </p>
        <p>竹为高大、生长迅速的禾草类植物,茎为木质。分布于热带、亚热带至暖温带地区,东亚、东南亚和印度洋及太平洋岛屿上分布最集中,种类也最多。
            竹枝杆挺拔,修长,四季青翠,傲雪凌霜,倍受中国人民喜爱,有“梅兰竹菊”四君子之一,“梅松竹”岁寒三友之一等美称。
            中国古今文人墨客,嗜竹咏竹者众多。
        </p>
        <p>
            竹文化是汉族劳动人民在长期生产实践和文化活动中,把竹子形态特征总结成了一种做人的精神风貌,如虚心、气节等,
            其内涵已形成汉民族品格、禀赋和精神象征。看到竹子,人们自然想到它不畏逆境,不惧艰辛,中通外直,宁折不屈的品格,
            这是一种取之不尽的精神财富,也正是竹子特殊的审美价值。
        </p>
    
        <h2 id="two">第二章</h2>
    
        <p><a href="#top">回到顶部</a></p>
    
        <p>竹为高大、生长迅速的禾草类植物,茎为木质。分布于热带、亚热带至暖温带地区,东亚、东南亚和印度洋及太平洋岛屿上分布最集中,种类也最多。
            竹枝杆挺拔,修长,四季青翠,傲雪凌霜,倍受中国人民喜爱,有“梅兰竹菊”四君子之一,“梅松竹”岁寒三友之一等美称。
            中国古今文人墨客,嗜竹咏竹者众多。
        </p>
        <p>
            竹文化是汉族劳动人民在长期生产实践和文化活动中,把竹子形态特征总结成了一种做人的精神风貌,如虚心、气节等,
            其内涵已形成汉民族品格、禀赋和精神象征。看到竹子,人们自然想到它不畏逆境,不惧艰辛,中通外直,宁折不屈的品格,
            这是一种取之不尽的精神财富,也正是竹子特殊的审美价值。
        </p>
    
        <h2 id="three">第三章</h2>
    
        <p><a href="#top">回到顶部</a></p>
    
        <p>竹为高大、生长迅速的禾草类植物,茎为木质。分布于热带、亚热带至暖温带地区,东亚、东南亚和印度洋及太平洋岛屿上分布最集中,种类也最多。
            竹枝杆挺拔,修长,四季青翠,傲雪凌霜,倍受中国人民喜爱,有“梅兰竹菊”四君子之一,“梅松竹”岁寒三友之一等美称。
            中国古今文人墨客,嗜竹咏竹者众多。
        </p>
        <p>
            竹文化是汉族劳动人民在长期生产实践和文化活动中,把竹子形态特征总结成了一种做人的精神风貌,如虚心、气节等,
            其内涵已形成汉民族品格、禀赋和精神象征。看到竹子,人们自然想到它不畏逆境,不惧艰辛,中通外直,宁折不屈的品格,
            这是一种取之不尽的精神财富,也正是竹子特殊的审美价值。
        </p>
        <p>竹为高大、生长迅速的禾草类植物,茎为木质。分布于热带、亚热带至暖温带地区,东亚、东南亚和印度洋及太平洋岛屿上分布最集中,种类也最多。
            竹枝杆挺拔,修长,四季青翠,傲雪凌霜,倍受中国人民喜爱,有“梅兰竹菊”四君子之一,“梅松竹”岁寒三友之一等美称。
            中国古今文人墨客,嗜竹咏竹者众多。
        </p>
        <p>
            竹文化是汉族劳动人民在长期生产实践和文化活动中,把竹子形态特征总结成了一种做人的精神风貌,如虚心、气节等,
            其内涵已形成汉民族品格、禀赋和精神象征。看到竹子,人们自然想到它不畏逆境,不惧艰辛,中通外直,宁折不屈的品格,
            这是一种取之不尽的精神财富,也正是竹子特殊的审美价值。
        </p>
    </div>
        <script src="./jquery-1.11.3.min.js"></script>
        <script>
            $('a[href*="#"]:not([href="#"])').click(function() {
                if (location.pathname.replace(/^//, '') == this.pathname.replace(/^//, '') && location.hostname == this.hostname) {
                    var target = $(this.hash);
                    target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
                    if (target.length) {
                        $('html, body').animate({
                            scrollTop: target.offset().top
                        }, 1000);
                        return false;
                    }
                }
            });
        </script>
    </body>
    </html>
  • 相关阅读:
    使用Delphi调用条形码控件BarTender打印标签
    我看过的书
    语法规则
    智能家居
    HAL库ADC的DMA采集
    HAL库串口中断接收
    触动心灵的一句话
    摄影技巧
    中国茶道
    单片机延时函数
  • 原文地址:https://www.cnblogs.com/sapho/p/6022829.html
Copyright © 2020-2023  润新知