Question

我正在尝试设计一个页面滚动网站。该网站有一个导航栏，当用户滚动它时，该导航栏的位置变得固定。问题是，当页面使用导航链接向下滚动到幻灯片时，在动画之后它会跳回到顶部以使幻灯片margin-top为0. （不是整个网页。向下滚动的幻灯片to）这只发生在firefox和IE中，它完全适用于webkit浏览器。请帮我解决这个问题我的代码如下。

HTML

    <div class="wrapper">
        <nav class="mnav">
            <ul>
                <li><a href="#slide1">home</a></li>
            </ul>
            <ul>
                <li><a href="#slide2">home</a></li>
            </ul>
            <ul>
                <li><a href="#slide3">home</a></li>
            </ul>
        </nav>

        <div id="slide1" class="slide"></div>
        <div id="slide2" class="slide"></div>
        <div id="slide3" class="slide"></div>
    </div>

的 CSS 的

.slide {
height: 800px;
}
#slide1 {
background: red;
}
#slide2 {
background: orange;
}
#slide3 {
background: green;
}

.mnav li {
display: inline;
float: left;
background: #fff;

}

.fixed  {
position: fixed;
top: 0; 
 }

    .fixed nav ul li {
display: inline;
float: left;
background: #fff;
}

JQUERY滚动

  $('document').ready(function() {
var topRange = 350, // measure from the top of the viewport to X pixels down
edgeMargin = 280, // margin above the top or margin from the end of the page
animationTime = 4000, // time in milliseconds
contentTop = [];

$(document).ready(function() {

    // Stop animated scroll if the user does something
    $('html,body').bind('scroll mousedown DOMMouseScroll mousewheel keyup', function(e) {
        if (e.which > 0 || e.type == 'mousedown' || e.type == 'mousewheel') {
            $('html,body').stop();
        }
    })
    // Set up content an array of locations
    $('nav').find('a').each(function() {
        contentTop.push($($(this).attr('href')).offset().top);
    })
    // Animate menu scroll to content
    $('nav').find('a').click(function() {
        var sel = this, newTop = Math.min(contentTop[ $('nav a').index($(this))], $(document).height() - $(window).height());
        // get content top or top position if at the document bottom
        $('html,body').stop().animate({
            'scrollTop' : newTop- 400
        }, animationTime, "easeInOutQuint",function() {
            window.location.hash = $(sel).attr('href');
        });
        return false;
    })
    // adjust  menu
    $(window).scroll(function() {
        var winTop = $(window).scrollTop(), bodyHt = $(document).height(), vpHt = $(window).height() + edgeMargin;
        // viewport height + margin
        $.each(contentTop, function(i, loc) {
            if ((loc > winTop - edgeMargin && (loc < winTop + topRange || (winTop + vpHt ) >= bodyHt ) )) {
                $('nav a').removeClass('selected').eq(i).addClass('selected');
            }
        })
    })
})
  });

用于修复导航的jquery

$(document).ready(function() {
$(window).scroll(function() {
    var scrollTop = 80;
    if ($(window).scrollTop() >= scrollTop) {
        $('nav').addClass('fixed');


    }
    if ($(window).scrollTop() < scrollTop) {
        $('nav').removeClass('fixed');

    }
})
})

Answer 1

您正在设置window.location.hash，这会导致页面在某些浏览器中跳转。要阻止这种情况发生，请在设置哈希后立即再次设置scrolltop。所以而不是：

..., animationTime, function() {
    window.location.hash = $(sel).attr('href');
}...

你做了

..., animationTime, function() {
    window.location.hash = $(sel).attr('href');
    $('html,body').scrollTop(newTop-200);
}...

另见这个更新的小提琴：http://jsfiddle.net/pyUY7/6/

一页网站定位问题firefox和IE

1 个答案: