How to add anchor points to the page? Two ways to add anchor points-JS Tutorial-php.cn

Table of Contents

Method 1: Use the a tag to add " >Method 1: Use the a tag to add

Home

Web Front-end

JS Tutorial

How to add anchor points to the page? Two ways to add anchor points

青灯夜游

Nov 13, 2018 pm 02:06 PM

html jquery anchor point

How to add anchor points to the page? This article will introduce you to two methods of adding anchor points to the page. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Method 1: Use the a tag to add

1. By setting the href attribute of the a tag, jump to the specified id tag in the page. Position

2. Add # as an identifier before the href attribute value of the a tag, indicating that it is jumping inside the current page

Simple case:

<html>
<head></head>
<body>
<!--设置锚点的a标签-->
<a href=&#39;#miao&#39;>跳一跳</a>
<br />
<!--跳转到的锚点位置-->
<h3 id=&#39;miao&#39;>跳到这里..</h3>
</body>
</html>

Copy after login

This There are many disadvantages of this method, such as changing the address bar parameters, abrupt jumps, unfriendly to users, etc...

So, if you pay more attention to details and have obsessive-compulsive disorder in this area, it is recommended to use the following This method.

Method 2: Use jQuery’s animate animation to jump

Without further ado, let’s start with the code:

<html>
<head>
    <title></title>
<script>
    $(document).ready(function () {
        //点击触发事件
        $("#jumpNow").click(function () {
            $("html,body").animate({
                scrollTop: $("#imhere").offset().top//跳转到的位置
            }, {
                    duration: 400,//预定速度
                    easing: "swing",//动画效果.swing:在开头/结尾移动慢，在中间移动快;"linear": 匀速移动
                });
        });

});
</script>
</head>

<body>
<!--设置锚点的标签-->
<span id=&#39;jumpNow&#39;>跳一跳</span>
<br />
<!--跳转到的锚点位置-->
<h3 id=&#39;imhere&#39;>跳到这里...</h3>
</body>

</html>

Copy after login

jQuery's animate is a function that implements page animation. It is relatively powerful and is more than enough to implement an anchor point jump. If you want to learn the animate function, you can refer to: [jQuery-In-depth Learning of Animate (1)]

This method can control the speed and method of animation jump, and will not change the address bar. Parameters are relatively elegant. It is recommended to use this method!

Summary: The above is the entire content of this article. I hope it can be helpful to everyone's learning. If you want to watch more video tutorials, we recommend: jQuery Tutorial!

The above is the detailed content of How to add anchor points to the page? Two ways to add anchor points. For more information, please follow other related articles on the PHP Chinese website!

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