使用id滚动，然后在锚定id div时跳转页面

Question

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

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 default会立即重定向您，但如果您想用javascript制作动画，请使用事件.prventDefault（）禁用默认行为，然后运行动画。

Ohter示例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);
    }
});