平滑滚动到另一个html页面中的div [英] smooth scrolling to a div in a different html page

问题描述

我在每个页面中都有一个菜单栏，当我单击其中一个子项目时，我希望页面重定向到另一个html并平滑滚动到该特定div. 我正在使用此代码使它在一页的div中平滑滚动:

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?

推荐答案

在通过google和stackoverflow搜索解决方案来平滑滚动锚定的同时，很显然存在许多相同页面的解决方案.处理跨多个页面的多个锚点之间的平滑滚动似乎仅限于stackoverflow上的一次质量检查.但是，提出的解决方案对我而言并不奏效.

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.

虽然我在处理Java和CSS方面还不如初学者，但我想传递一种我构想的解决方案，将几种解决方案组合在一起，至少可以在Firefox和Chrome上使用(在其他浏览器上却没有使用过).

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).

我希望有人能对此有所了解，并提供一些建议以: 1)使它与跨浏览器更兼容 2)清理

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:

多页-多个锚点 引导程序3 多种jQuery功能

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();
}   
    });

这篇关于平滑滚动到另一个html页面中的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！