0

http://jsfiddle.net/Sy269/3/

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

有没有办法使用浏览器窗口/JSFiddle 窗口的底部来锚定到第 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;
        });
    });
});
4

2 回答 2

0

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

于 2013-06-12T04:36:27.313 回答
0

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

问题是锚定要到顶部。因此，如果我们采用窗口高度。

Anchor Location+$(window).height()

所以经过一些代码修改：

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

请参阅：在页面加载时滚动到 Div 底部 (jQuery)

于 2013-06-12T03:24:47.293 回答