jquery实现锚点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Anchor Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        #content div {
            height: 100vh;
            border-bottom: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div id="menu">
        <a href="#section1">Section 1</a>
        <a href="#section2">Section 2</a>
        <a href="#section3">Section 3</a>
    </div>

    <div id="content">
        <div id="section1">Content for Section 1</div>
        <div id="section2">Content for Section 2</div>
        <div id="section3">Content for Section 3</div>
    </div>

    <script>
        $(document).ready(function() {
            $('#menu a').on('click', function(event) {
                event.preventDefault();
                var target = $(this).attr('href');
                $('html, body').animate({
                    scrollTop: $(target).offset().top
                }, 800);
            });
        });
    </script>
</body>
</html>