Question

我有来自Page A的锚链接，abc.com / news＃section2

在新闻页面中，标题会阻止第2部分的顶部。我试图在jquery中将其偏移但是它不起作用。希望有人可以提前帮助，谢谢！

jQuery('.ch-item a').click(function(e) {

    var link = jQuery(this);
    var target = jQuery(link.attr('href').substring(link.attr('href').indexOf('#')));
    if(target.length > 0) {
        jQuery('html, body').stop().animate({scrollTop: target.offset().top - jQuery('.header_container').outerHeight()}, 1000);
        e.preventDefault();
    } else if(options.preventNonLink) {
        e.preventDefault();
    }
});``

Answer 1

试试这个

$(document).ready(function () {
    $('a[href^="#"]').on('click', function (e) {
        e.preventDefault();
        var target = this.hash;
        var t = $(this.hash).offset().top;
        $('html, body').stop().animate({
        scrollTop: t,
        }, 1000, function () {
            window.location.hash = target;
        });
    });
});

Answer 2

这是为jQuery编写的锚点修补片段。它会在页面加载时触发，如果哈希值发生变化（在页面锚点上）。

(function($, window) {
  var adjustAnchor= function() {

    var $anchor = $(':target'),
    	fixedElementHeight = 100;

    if ($anchor.length > 0) {

      $('html, body')
        .stop()
        .animate({
          scrollTop: $anchor.offset().top - fixedElementHeight
        }, 200);

    }

  };

  $(window).on('hashchange load', function() {
    adjustAnchor();
  });

})(jQuery, window);

这将检查页面加载时的URL以查看是否存在锚点，然后将目标页面上的页面调整100px。

编辑：调整以使高度调整明显

相同的Uglified：

!function(o,n){var t=function(){var n=o(":target"),t=100;n.length>0&&o("html, body").stop().animate({scrollTop:n.offset().top-t},200)};o(n).on("hashchange load",function(){t()})}(jQuery,window);

JQuery滚动链接到另一个页面偏移标题

2 个答案: