Question

我有一个代码可以在页面加载时滑动到特定的div。我正在尝试修改该代码。我希望将它滑动到href的click事件上的特定div。 JS Fiddle Link

Javascript

$(document).ready(function () {
    // Handler for .ready() called.
    $('html, body').animate({
        scrollTop: $('#what').offset().top
    }, 'slow');
});

HTML

<div id="mydiv">DATA FOR SAMPLE 1</div>
<div id="what">SAMPLE DATA</div>
<ul>
    <li><a href="#"> on click<a/></li>
</ul>

Answer 1

试试这个。在这里，我为您的标记（推荐）添加了一个名为on_click_a的新ID，或者您可以使用$('a)代替$('#on_click_a')

<div id="mydiv">DATA FOR SAMPLE 1</div>
<div id="what">SAMPLE DATA</div>
<ul>
    <li><a href="#" id='on_click_a'> on click<a/></li>
</ul>


$(document).ready(function () {
    // Handler for .ready() called.
    $("#on_click_a").click(function(){
            $('html, body').animate({
        scrollTop: $('#what').offset().top
    }, 'slow');
    });

});

Answer 2

这里有两点需要注意。如果您将<a>链接指向空白锚点href="#"，它会自动将您发送到页面顶部。

所以为了做到这一点，你需要摆脱它。

<a>on click</a>

如果你不删除href="#"它仍会有效，但它会在滚动之前跳到页面顶部并返回，这是不雅观的。

您需要做的另一件事是将事件绑定到<a>

$(document).ready(function () {
     // Handler for .ready() called.
     $("a").click(function(){
         $('html, body').animate({
             scrollTop: $('#what').offset().top
        }, 'slow');
    });
});

JSFiddle

Answer 3

的Javascript

 $(document).ready(function () {    
     $('#clicky').click(function() {
        $('html, body').animate({
            scrollTop: $('#what').offset().top
         }, 'slow');
     });
 });

HTML

 <div id="mydiv">DATA FOR SAMPLE 1</div>
 <div id="what">SAMPLE DATA</div>
 <ul>
     <li><a id="clicky" href="#"> on click<a/></li>
 </ul>

在href点击上使用animate功能

3 个答案:

JSFiddle