用jquery實現平滑的頁面滾動效果

時間 2019-11-13

原文原文鏈接

經過幾句jquery代碼實現頁面平滑滾動到某一錨點的效果。實現代碼來源於https://css-tricks.com/snippets/jquery/smooth-scrollingcss

實現的jquery代碼以下：html

       $('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對象及它的一些屬性：jquery

location對象屬於window對象，包含有關當前url的信息。服務器

location對象的屬性：this

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

例如，當前頁面的url是：http://www.cnblogs.com/sapho/p/6022829.htmlspa

那麼location.href = 「http://www.cnblogs.com/sapho/p/6022829.html」；code

location.hostname = 「www.cnblogs.com」；htm

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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。