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

Home

Web Front-end

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

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

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

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

What is the purpose of the <datalist> element?Mar 21, 2025 pm 12:33 PM

The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

How do I use HTML5 form validation attributes to validate user input?Mar 17, 2025 pm 12:27 PM

The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.

What is the purpose of the <iframe> tag? What are the security considerations when using it?Mar 20, 2025 pm 06:05 PM

The article discusses the <iframe> tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.

What is the purpose of the <progress> element?Mar 21, 2025 pm 12:34 PM

The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati

What is the purpose of the <meter> element?Mar 21, 2025 pm 12:35 PM

The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex

What are the best practices for cross-browser compatibility in HTML5?Mar 17, 2025 pm 12:20 PM

Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.

What is the viewport meta tag? Why is it important for responsive design?Mar 20, 2025 pm 05:56 PM

The article discusses the viewport meta tag, essential for responsive web design on mobile devices. It explains how proper use ensures optimal content scaling and user interaction, while misuse can lead to design and accessibility issues.

How do I use the HTML5 <time> element to represent dates and times semantically?Mar 12, 2025 pm 04:05 PM

This article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit

See all articles