简体   繁体   中英

Auto-Scroll If Button on Previous Page Was Clicked

Let's say there are two buttons (Button 1 and Button 2) on a page (Page A). Both of these buttons, when clicked, lead to the same external page (Page B). How do make it so that button 1, when clicked, leads to the top of the external page B, and that button 2 automatically causes the page to scroll down to some area of the page.

I would assume that example code would look something like this:

<div id="b1" class="button"> </div> <div id="b2" class="button"> </div>

And on the external page for a javascript function:

function initPage() {
 if(scrollTo1k == true)
  {
    body.animate({scrollTop: 1000}, 1000);
  }
}

EDIT : I now can make the computer open up a new page to the desired location, but the scroll effect when opening the page is nonexistent.

You can consider to use some <a> tag

This way, you can have your first button like

<a href="targe-page-url">

Second button would be

<a href="targe-page-url#section-id-to-reach">

which will use HTML Bookmark link W3C Sample of Bookmark link This will be connected to a div like <div id="section-id-to-reach"> So the jump to desired area is directly handled by the browser

Then, the scroll to target does not required any Javascript. The scroll effect can be achieved by adding this CSS property to your page

body {
    scroll-behavior: smooth;
}


if you have an element you would like to scroll to this would work

$([document.documentElement, document.body]).animate({
    scrollTop: $("#some-element-id").offset().top
}, 1000);

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM