Home > Web Front-end > H5 Tutorial > body text

How to use

不言
Release: 2018-11-06 15:05:40
Original
3603 people have browsed it

With the advent of one-page websites, using scrolling as a method of navigating long pages has become increasingly popular. This small part is implemented in JS jQuery code and you can easily set links in nav elements to scroll to the corresponding part of the page. If you want the anchor tag to be added to the page when JS is not present.

Coffeescript:

$("nav").find("a").click (e) ->
    e.preventDefault()
    section = $(this).attr "href"
    $("html, body").animate
        scrollTop: $(section).offset().top
Copy after login

or JS:

$("nav").find("a").click(function(e) {
    e.preventDefault();
    var section = $(this).attr("href");
    $("html, body").animate({
        scrollTop: $(section).offset().top    });});
Copy after login

and some sample HTML

<nav>
    <a href="#welcome">Welcome</a>
    <a href="#about">About</a>
    <a href="#section3">Section 3</a>
</nav>
<div id="welcome">Welcome to this website</div>
<div id="about">About this website, and such</div>
<div id="section3">The third section</div>
Copy after login

The above is the detailed content of How to use

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template