How to use js to jump to the specified div after clicking a certain part of the current page?

In the process of website construction, sometimes it is necessary to implement such a function. Clicking a certain position with the mouse on the current page will directly move to another specified position on the current page. In fact, this function is certainly not difficult for senior programmers, but for novices, it is difficult, mainly because they don’t know where to start. So this article will introduce to you two methods for js to jump to the page to specify the div position.

1. Implementation through html anchor point:
If we want to click on an html anchor point to jump, that is, click on an A label hyperlink to jump, we can change the href of the A label The attribute directly points to the div that jumps to the specified position. The code example is as follows:

<a href="#abc">点击跳转</a>
<div id="abc">将要跳转到这里</div>

Note: Clicking on the A link above will scroll to the div with id="abc" on the same page. It should be noted that The id of the div that jumps to the specified position is unique. The A tag points directly to this id. Don't forget to add the # sign in front of the id.

2. Realize by clicking the button button:
If the place we want to click to jump is a button button, since the button cannot add href, we have to use js jump code to achieve it, the code An example is as follows:

<script>
    function onTopClick() {
         window.location.hash = "#abc";
       }
    </script>
    <input  type="button" name="Submit" value="提交"  onclick="javascript:onTopClick();" />
    <div id="abc">js跳转到页面指定div位置</div>

Note: As mentioned above, clicking the submit button will scroll and jump to the div with id="abc" on the same page. The principle of this js click jump page code is: each element of the page is given a unique ID, clicking the submit button triggers the js click event, and js scrolls and jumps to the element through the ID, window.location.hash = "#abc" refers to the div positioned to the current page id="abc".

So the above are two simple methods for implementing local jump pages in divs. I believe that even novices can easily master the relevant knowledge after reading the introduction in this article.

The above is the detailed content of How to use js to jump to the specified div after clicking a certain part of the current page?. For more information, please follow other related articles on the PHP Chinese website!