javascript - 关于锚点平滑跳转时的问题

问题描述

问 题

看完在线教程，跟着做了个网页定位导航效果出来。即点击导航某项，跳转到该锚点。（如图1）
然后我在此基础上想添加平滑过渡。（如图1的click事件）

图1 - js代码

    $(document).ready(function () {
        $(window).scroll(function () {
            var top = $(document).scrollTop();
            var menu = $("#menu");
            var items = $("#content").find(".item");
            var currentId;
            items.each(function(){  
                var m = $(this);
                var itemTop = m.offset().top;
                if(top>itemTop-200){  
                    currentId = "#"+m.attr('id');
                }else{
                    return false;
                }
            });
            var item = menu.find('.current');
            if(item.attr('href') != currentId){
                item.removeClass('current');
                menu.find('[href='+currentId+']').addClass('current');
            }
        });
        
        $('a[href*=#]').click(function(){
            var target = $($(this).attr("href")).offset().top + "px";
            $('html,body').animate({
                scrollTop: target 
            }, 500)
        })
    });
    

图2 - html代码

<div id="menu">
    <h1>正在首发</h1>
    <ul>
        <li><a href="#item1" class="current"><strong>2014.04.09</strong><br>施华蔻0元赢Smart</a></li>
        <li><a href="#item2"><strong>2014.04.05</strong><br>alienware机皇限量抢</a></li>
        <li><a href="#item3"><strong>2014.04.04</strong><br>联想Miix2 3G平板电脑</a></li>
        <li><a href="#item4"><strong>2014.04.03</strong><br>御爵厨房垃圾处理器</a></li>
        <li><a href="#item5"><strong>2014.04.01</strong><br>中兴天机GRAND S II</a></li>
    </ul>
</div>
<div id="content">
    <div id="item1" class="item">
        <img src="http://img.mukewang.com/536ca02800014e7105000400.jpg">
    </div>
    <div id="item2" class="item">
        <img src="http://img.mukewang.com/536ca04b0001dbeb04520519.jpg">
    </div>
    <div id="item3" class="item">
        <img src="http://img.mukewang.com/536ca06200016a4d03950387.jpg">
    </div>
    <div id="item4" class="item">
        <img src="http://img.mukewang.com/536ca0ab0001c89205000400.jpg">
    </div>
    <div id="item5" class="item">
        <img src="http://img.mukewang.com/536ca0830001b17f05000400.jpg">
    </div>
</div>

尽管能够完成过渡，但是会出现页面先闪现需要跳转的板块，再平滑过渡到该板块的BUG。
有什么办法能解决这个问题？？？在线等

解决方案

click事件最后一行增加return false;

这篇关于javascript - 关于锚点平滑跳转时的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！