前端屏幕滚动效果_html/css_WEB-ITnose-html教學-PHP中文網

首頁

web前端

html教學

前端屏幕滚动效果_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 08:46 AM

屏幕的滚动我这边给分成两种：

从某个位置直接滚动到最顶端
点击按钮到指定的位置，这个会涉及到锚点

在我的文章《设置锚点的三种方法》里面有介绍到，不明白的朋友看一下。

第一种方法最简单，只要利用锚点id定位就可以直接实现了。这种这边就不多做介绍了，主要介绍第二种，会第二种，第一种都是小意思了

介绍第二种先来点代码，大家看的比较清楚：

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>滚动</title>        <style type="text/css">            .classCont div {                height: 400px;                width: 200px;                border: 1px solid #000000;            }            .hrefCont{                position: fixed;                top: 50%;                left: 230px;            }            .hrefCont a{                display: block;                width: 20px;                height: 20px;                margin-bottom: 2px;                text-align: center;                line-height: 20px;                border: 1px groove #000000;                cursor: pointer;                text-decoration: none;            }        </style>    </head>    <body>        <div class="classCont">            <div id="class1">1</div>            <div id="class2">2</div>            <div id="class3">3</div>            <div id="class4">4</div>            <div id="class5">5</div>        </div>        <div class="hrefCont">            <a href="#class1">1</a>            <a href="#class2">2</a>            <a href="#class3">3</a>            <a href="#class4">4</a>            <a href="#class5">5</a>        </div>    </body></html>

运行结果界面

运行后大家会发现没动画确实很生硬，一点都不友好。接下来我们来家电动画，在原来的基础上加入js代码：

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>    <script type="text/javascript">        $(document).ready(function() {            $("a").click(function() {                $("html, body").animate({                    scrollTop: $($(this).attr("href")).offset().top + "px"                }, {                    duration: 500,                    easing: "swing"                });                return false;            });        });    </script>

点击相应的标签，对html和body标签执行整体动画处理，执行中获取标签href的属性值，这个值也就是锚点的id。

例如：点击右边浮动框 1 的时候，$($(this).attr("href"))等于$("#class1")。再获取 id 为 class1 顶部的偏移量，这个偏移量就是滚动的距离。之后设置一下滚动的时间和滚动的方式。

duration 是滚动的时间
easing 是滚动的方式有时间的朋友可以去看看这个，挺好玩

上面代码看懂的大神请不要嫌弃我啰嗦，具体的效果体验还是要大家自己动手实践了。如有更好方法请开尊口！

帮到你了么？喜欢就点赞吧！^_^

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

公眾號網頁更新緩存難題：如何避免版本更新後舊緩存影響用戶體驗？Mar 04, 2025 pm 12:32 PM

公眾號網頁更新緩存，這玩意兒，說簡單也簡單，說複雜也夠你喝一壺的。你辛辛苦苦更新了公眾號文章，結果用戶打開還是老版本，這滋味，誰受得了？這篇文章，咱就來扒一扒這背後的彎彎繞繞，以及如何優雅地解決這個問題。讀完之後，你就能輕鬆應對各種緩存難題，讓你的用戶始終體驗到最新鮮的內容。先說點基礎的。網頁緩存，說白了就是瀏覽器或者服務器為了提高訪問速度，把一些靜態資源（比如圖片、CSS、JS）或者頁面內容存儲起來。下次訪問時，直接從緩存裡取，不用再重新下載，速度自然快。但這玩意兒，也是個雙刃劍。新版本上線，