> For the complete documentation index, see [llms.txt](https://javascriptuse.gitbook.io/javascript/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://javascriptuse.gitbook.io/javascript/hieu-ung-scroll-+-animation-+-menu-truot-muot.md).

# Hiệu ứng scroll + animation + menu trượt mượt

![](/files/-Lx5Ius2AUxmhr8yIiNN)

```
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Scoll</title>
    <!-- Latest compiled and minified CSS & JS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    <script>
    	jQuery(document).ready(function($) {
    		$('a[href*="#"]:not([href="#"])').click(function(event) {
    			if(location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
                    var target = $(this.hash);
                    var target = target.length ? target : $('name=['+this.hash.slice(1)+']');
                    if(target.length) {
                        $('html,body').animate({
                            scrollTop: target.offset().top
                        },700);
                    }
                    return false;
                }
    		});
    	});
    </script>
</head>

<body>
    <header>
        <nav class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">Title</a>
                </div>
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse navbar-ex1-collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#home1">Home 1</a></li>
                        <li><a href="#home2">Home 2</a></li>
                        <li><a href="#home3"">Home 3</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <main>
    	<article id="home1">
    		<div class="card">
    			<img class="card-img-top" src="http://lorempixel.com/400/200/sports/1" alt="Card image cap">
    			<div class="card-block">
    				<h4 class="card-title">Card title</h4>
    				<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    				<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    			</div>
    		</div>
    		<div class="card">
    			<div class="card-block">
    				<h4 class="card-title">Card title</h4>
    				<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    				<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    			</div>
    			<img class="card-img-bottom" src="http://lorempixel.com/400/200/sports/2" alt="Card image cap">
    		</div>
    	</article>
    	<article id="home2">
    		<div class="card">
    			<img class="card-img-top" src="http://lorempixel.com/400/200/sports/3" alt="Card image cap">
    			<div class="card-block">
    				<h4 class="card-title">Card title</h4>
    				<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    				<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    			</div>
    		</div>
    		<div class="card">
    			<div class="card-block">
    				<h4 class="card-title">Card title</h4>
    				<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    				<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    			</div>
    			<img class="card-img-bottom" src="http://lorempixel.com/400/200/sports/4" alt="Card image cap">
    		</div>
    	</article>
    	<article id="home3">
    		<div class="card">
    			<img class="card-img-top" src="http://lorempixel.com/400/200/sports/5" alt="Card image cap">
    			<div class="card-block">
    				<h4 class="card-title">Card title</h4>
    				<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    				<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    			</div>
    		</div>
    		<div class="card">
    			<div class="card-block">
    				<h4 class="card-title">Card title</h4>
    				<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    				<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    			</div>
    			<img class="card-img-bottom" src="http://lorempixel.com/400/200/sports/6" alt="Card image cap">
    		</div>
    	</article>
    </main>
</body>
</html>
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://javascriptuse.gitbook.io/javascript/hieu-ung-scroll-+-animation-+-menu-truot-muot.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
