简体   繁体   中英

How to auto scroll to another page using jQuery

I have two file in index and profile. I want to go to profile page and directly to section faq by automate scrolling

My index

<a href="profile.html">Go</a>

My Profile

<section id="home" style="height:500px;background:red">
<section id="name" style="height:500px;background:yellow">
<section id="faq" style="height:500px">

Is it possible when I click from homepage directly to id="faq" in profile page? Thank you

Yes you can do that:

At first give a name in anchor tag something like that in profile.html page in preferred location where you want to scroll:

<a name="jumpHere">somewhere</a>

And then set link location like following:

<a href="profile.html#jumpHere">Go</a>

Right now click on expected element you can trigger top link or on write something like following:

$("#faq").click(function(){
    window.location = 'profile.html#jumpHere';
})

You can just use an anchor link profile.html#faq to jump there, do not need jQuery, if you do not need scolling animations.

But if you do, you need jQuery to handle that:

$('a[href*=#]').click(function(event){
    $('html, body').animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 500);
    event.preventDefault();
});

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