Question

在下面的示例中，通过单击“Bottom of Section”链接，浏览器窗口将使用浏览器窗口的顶部链接到该锚点。换句话说，如果单击第2部分的“底部”，则在向上滚动一个刻度之前，第2部分将不可见。

有没有办法使用浏览器窗口/ JSFiddle窗口的底部锚定到Section 2标签（正确显示屏幕底部的第2节及其上方的所有内容）？

<div id="section1" class="section1">  

Section 1

<div id="bottom1"></div>
</div>

<div id="section2" class="section2">  

Section 2

<div id="bottom2"></div>
</div>

<div id="section3" class="section3">  

Section 3

<div id="bottom3"></div>
</div>

<div id="section4" class="section4">  

Section 4

<div id="bottom4"></div>
</div>

<a href="#section1">Go to Section 1</a>

<a href="#section2">Go to Section 2</a>

<a href="#section3">Go to Section 3</a>

<a href="#section4">Go to Section 4</a>

<br />

<a href="#bottom1">Bottom of Section 1</a>

<a href="#bottom2">Bottom of Section 2</a>

<a href="#bottom3">Bottom of Section 3</a>

<a href="#bottom4">Bottom of Section 4</a>

我已经准备好了这个jQuery代码：

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

Answer 1

我会使用JavaScript。看看http://jsfiddle.net/Sy269/2/

问题在于锚被设置为顶部。所以，如果我们采取窗口高度。

Anchor Location+$(window).height()

经过一些代码修改后：

$('#div1').scrollTop($('#div1')[0].scrollHeight);

请参阅：Scroll to bottom of Div on page load (jQuery)

Answer 2

在div之前使用锚点：<a id="#section1"></a>它会跳转到那个div

锚标记 - 链接到浏览器窗口的底部而不是顶部

2 个答案: