Javascript页面滚动位置

Question

I am using a JavaScript tabbed menu, which loads different content (text/photos) when a menu item is selected.

However, when you click a menu item, the scroll position jumps to the middle or bottom of the element (in this case the photo) where I need it to show the menu and the top of the photo.

Can someone advise how I set it up to maintain the fixed position at the top, so that the menu and top of the photo is visible, leaving the user to scroll down manually.

https://jsfiddle.net/njd9L7ok/

$(document).ready(function () {
    var lastItem = null;
    $('#listingmenu').on('click', 'a', function () {
        newItem = this.getAttribute('href').substring(1);
        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();
});

Answer 1

You need to prevent default behavior on the click.

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

Answer 2

The links point to div s on the page, so when clicked they will scroll to the linked div . Just use a property other than href in your logic. In this case I used a data attribute and referenced it with jQuery's data method .

 $(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(); }); 

 } 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; 

 <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>