Question

我正在使用JavaScript标签式菜单，该菜单会在选择菜单项时加载不同的内容（文本/照片）。

但是，当您单击菜单项时，滚动位置会跳转到元素的中间或底部（在本例中为照片），我需要它来显示菜单和照片的顶部。

有人可以建议我如何设置它以保持顶部的固定位置，以便菜单和照片顶部可见，让用户手动向下滚动。

   App\Offer::with('releases')->get();

Answer 1

您需要阻止点击时的默认行为。

$(document).ready(function () {
    $('#listingmenu').on('click', 'a', function (event) {
        event.preventDefault();
        // all your other code
    }).find('a:first').click();
});

Answer 2

链接指向页面上的div，因此点击后，它们将滚动到链接的div。只需在逻辑中使用href以外的属性即可。在这种情况下，我使用data attribute并使用jQuery's data method引用它。

＆＃13;

$(document).ready(function () {
    var lastItem = null;
    $('#listingmenu').on('click', 'a', function () {
        newItem = this.getAttribute('data-pic');
        if (newItem != lastItem) {
            $('.current').not($(this).closest('li').addClass('current')).removeClass('current');
            // fade out all open subcontents
            $('.pbox:visible').hide(600);
            // fade in new selected subcontent
            $('#' + newItem).show(600);
            lastItem = newItem;
        }
    }).find('a:first').click();
});

＆＃13;

}
ul#listingmenu {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
}
ul#listingmenu li {
    position: relative;
    float: left;
    border-bottom: 3px solid #272e3b;
    margin-right: 10px;
    padding-right: 0px;
    padding-bottom: 5px;
    display: inline-block;
}
ul#listingmenu .current {
    border-bottom: 3px solid #fe8f25;
}
ul#listingmenu li:hover {
    border-bottom: 3px solid #fe8f25;
}
ul#listingmenu li a {
    padding: 2px 2px;
    text-decoration: none;
    font: 12px Avenir, Arial, "Times New Roman", Times, serif;
    color: #272e3b;
}
ul#listingmenu li a:hover {
    color: #fe8f25;
    border: none;

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div>
<ul id="listingmenu">
 <li class="current"><a href="#" data-pic="div1">MENU 1</a></li>
    <li><a href="#" data-pic="div2">MENU 2</a></li>
    <li><a href="#" data-pic="div3">MENU 3</a></li>
    <li><a href="#" data-pic="div4">MENU 4</a></li>
</ul><br><br>
<div class="pbox" id="div1"><img src="//c2.staticflickr.com/6/5768/21412232748_5834dc04f2_h.jpg"></div>
<div class="pbox" id="div2"><img src="//c2.staticflickr.com/6/5773/21403313739_fd703c4be9_k.jpg"></div>
<div class="pbox" id="div3"><img src="//c1.staticflickr.com/1/610/20974896524_4aa6ce41b1_h.jpg"></div>
<div class="pbox" id="div4"><img src="//c1.staticflickr.com/1/585/21416851580_6d97a4dac9_k.jpg"></div>
</div>

＆＃13;

Javascript页面滚动位置

2 个答案: