Question

使用id滚动然后在锚定ID div时跳转页面。这是我的代码。：

jQuery('#menu-item-46 a').click(function(){ 
    jQuery('html, body').animate({
        scrollTop: jQuery('#news').offset().top        
    }, 2000);   
});

Answer 1

如果您的主播href在您的DOM中指定了id元素，那么您的页面将调整您的视图端口滚动位置，以将该元素放在顶部（或关闭）尽可能）。在JavaScript继续为scrollTop属性设置动画之前会出现此问题。

防止锚点的默认行为停止：

jQuery('#menu-item-46 a').click(function(e){
    e.preventDefault();
    jQuery('html, body').animate({
        scrollTop: jQuery('#news').offset().top        
    }, 2000);   
});

JSFiddle

Answer 2

Anchors默认会立即重定向您，但如果您想使用javascript进行动画，则deves会使用 event.preventDefault（）禁用默认行为，然后运行动画。

示例http://jsfiddle.net/okco0069/

<select id="menu-item">
    <option value="news1">News1</option>
    <option value="news2">News2</option>
    <option value="news3">News3</option>
</select>

<a href="#anchor1">#anchor1</a>
<a href="#anchor2">#anchor2</a>

<h1>Lorem</h1>
<p>Lorem ipsum dolor sit amet, <a href="#anchor1">anchor1</a> adipisicing elit. 
   Rem neque corporis hic possimus, repellendus illo eaque molestiae atque numquam   
   deserunt officiis beatae.
</p>
<p>
  <a href="#anchor2">  modi similique veritatis eligendi quaerat, inventore ipsam?
  Deleniti.....
</p>

jQuery(document).ready(function ($) {
    $("#menu-item").change(function (event) {
        var id_element = "#" + $(this).val();
        var element = $(id_element);
        scroll_to_element(element);
    });

    $("a").click(function (event) {
        event.preventDefault(); //the default action of the event will not be triggered.
        var id_lement = $(this).attr('href');
        var element = $(id_lement);
        scroll_to_element(element);
    });

    function scroll_to_element(element) {
        $("html , body").animate({
            scrollTop: element.offset().top
        }, 2000);
    }
});

使用id滚动然后它来锚定id div时跳转页面

2 个答案: