smooth scrolling to a div in a different html page

问题

I have a menu bar in each of the pages and when I click on one of the sub-items I want the page to redirect to the other html and scroll smoothly to that specific div. I am using this code to have it scroll smoothly within the divs of one page:

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {

      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

Is there a way to modify this code so that I am able to what I am asking?

回答1:

Use anchor tags and this:

$(function() {
    $('a[href*=#]:not([href=#])').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
        if (target.length) {
        $('html,body').animate({
            scrollTop: target.offset().top
        }, 1000);
    return false;
  }
}
});
});

see this: view-source:http://css-tricks.com/examples/SmoothPageScroll/

I found simething for the catching page

var match = location.hash.match(/^#?(.*)$/)[1];
if (match)
{
   //call you smooth scroll code. Fake the link click etc
}

回答2:

While searching for a solution, via google and stackoverflow, to handle smoothscrolling to anchors it was quite apparent that many same-page solutions exist. Dealing with smoothscroll between multiple anchors across multiple pages seems to be limited to just one QA on stackoverflow. That solution as presented however didn't quite work for me.

While I am just below beginner in handling java and CSS, I would like to pass on a solution I concocted by combining several solutions into one which is at least working on Firefox and Chrome (untested on other browsers).

I am hoping that someone might have a look at this and offer some suggestions to: 1) make it more cross-browser compatible 2) clean it up

Finally, here are some of the conditions I have it working with without issue:

Multiple pages - Multiple anchors Bootstrap 3 multiple jquery functions

There is on caveat though which I have posted here with regards to Masonry and multiple anchors across pages: Anchors to pages with Masonry layouts

    $(function() {
    $('[data-toggle="elementscroll"]').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
                && location.hostname == this.hostname) {

            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
            if (target.length) {
                $('html,body').animate({
                    scrollTop: target.offset().top -57 //head space
                }, 1000); //scroll speed
                return false;
            }
        }
    });
});

    $(function() {
$('html, body').hide();
if (window.location.hash) {
        setTimeout(function() {
                $('html, body').scrollTop(0).show();
                $('html, body').animate({
                        scrollTop: $(window.location.hash).offset().top -57 // head space
                        }, 1000) //scrollspeed
        }, 0);
}
else {
        $('html, body').show();
}   
    });

来源：https://stackoverflow.com/questions/23462046/smooth-scrolling-to-a-div-in-a-different-html-page

标签

jquery

html

smooth-scrolling