前端屏幕滚动效果_html/css_WEB-ITnose-HTML-Tutorial-php.cn

Heim

Web-Frontend

HTML-Tutorial

前端屏幕滚动效果_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 是滚动的方式有时间的朋友可以去看看这个，挺好玩

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

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

Stellungnahme

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Verwandter Artikel

Von Text zu Websites: Die Kraft von HTMLApr 13, 2025 am 12:07 AM

HTML ist eine Sprache, mit der Webseiten erstellt, die Webseitenstruktur und -inhalt über Tags und Attribute definiert werden. 1) HTML organisiert die Dokumentstruktur über Tags, wie z. B.. 2) Der Browser analysiert HTML, um das DOM zu erstellen und die Webseite zu rendern. 3) Neue Merkmale von HTML5, wie z. B. Multimedia -Funktionen. 4) Zu den häufigen Fehlern gehören nicht abgestimmte Bezeichnungen und nicht geeignete Attributwerte. 5) Die Optimierungsvorschläge umfassen die Verwendung semantischer Tags und die Reduzierung der Dateigröße.

HTML, CSS und JavaScript verstehen: Ein AnfängerhandbuchApr 12, 2025 am 12:02 AM

WebdevelopmentRelieSonHtml, CSS und JavaScript: 1) HtmlStructuresContent, 2) CSSstylesit und 3) JavaScriptaddssinteraktivität, Bildung von TheBasisofModerernwebexperiences.

Die Rolle von HTML: Strukturierung von WebinhaltenApr 11, 2025 am 12:12 AM

Die Rolle von HTML besteht darin, die Struktur und den Inhalt einer Webseite durch Tags und Attribute zu definieren. 1. HTML organisiert Inhalte über Tags wie das Lesen und Verständnis. 2. Verwenden Sie semantische Tags wie usw., um die Zugänglichkeit und SEO zu verbessern. 3. Optimierung des HTML -Codes kann die Ladegeschwindigkeit und die Benutzererfahrung der Webseite verbessern.

HTML und Code: Ein genauerer Blick auf die TerminologieApr 10, 2025 am 09:28 AM

HtmlisaspecifictypeofcodeFocusedonstructuringuringwebcontent, während "Code" breitincludesluages -ähnlichjavaScriptandpythonforfunctionality.1) htmldefineswebpageStructureStags.2) "Code" cometesaWiNrangeOfLanguagesForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForfirsInsForfunctionNacts

HTML, CSS und JavaScript: Wesentliche Tools für WebentwicklerApr 09, 2025 am 12:12 AM

HTML, CSS und JavaScript sind die drei Säulen der Webentwicklung. 1. HTML definiert die Webseitenstruktur und verwendet Tags wie z.

Die Rollen von HTML, CSS und JavaScript: KernverantwortungApr 08, 2025 pm 07:05 PM

HTML definiert die Webstruktur, CSS ist für Stil und Layout verantwortlich, und JavaScript ergibt eine dynamische Interaktion. Die drei erfüllen ihre Aufgaben in der Webentwicklung und erstellen gemeinsam eine farbenfrohe Website.

Ist HTML für Anfänger leicht zu lernen?Apr 07, 2025 am 12:11 AM

HTML ist für Anfänger geeignet, da es einfach und leicht zu lernen ist und schnell Ergebnisse sehen kann. 1) Die Lernkurve von HTML ist glatt und leicht zu beginnen. 2) Beherrschen Sie einfach die grundlegenden Tags, um Webseiten zu erstellen. 3) hohe Flexibilität und kann in Kombination mit CSS und JavaScript verwendet werden. 4) Reiche Lernressourcen und moderne Tools unterstützen den Lernprozess.

Was ist ein Beispiel für ein Start -Tag in HTML?Apr 06, 2025 am 12:04 AM

AnexampleofaTartingTaginHtmlis, die, die starttagsaresesinginhtmlastheyinitiateElements, definetheirtypes, andarecrucialForstructuringwebpages und -konstruktionsthedoms.

See all articles