I don't think that the solution you're using is great to rely on anchor links alone. I understand that it acts as some kind of pagination, but as you said - the fact that on load it's jumping to the element is a bit crummy.

I also really don't like the fact that if no anchor is set, then none of them are open. I'd much prefer it if the first one was your "default". However, I can't think of a good way to achieve this using CSS off the top of my head, unless you were to explicitly mention `

acc2:not(:target),

acc3:not(:target)` etc (maybe this would be easier in CSS4 if we get a parent selector - though I'm not sure how).

If you really want to achieve this with the existing solution, then using $("html,body").scrollTop(0) should work, but I also remember having issues relating to trying to instantly set the scroll position using jQuery. Try adding a timeout (could be really minimal like 1ms) and see if that helps:

// Try de/increasing the 200 and see if that helps
setTimeout(function() {
    $("html, body").scrollTop(0)
}, 200);

However, I'd still rather you recruited JavaScript a little more too, such as an initial check for a hash starting `

acc` and if there's none then focus on one of the elements (a default).

I have searched thru the forum and found several other similar issues, but none of the solutions worked for me.

Any help gratefully received.

April 5, 2015 at 4:34 pm

Hi there,

Thanks for writing in.

Your site has javascript error, which I think related to scrolling. How about removing all of your custom javascript and let us know so we could test it again.

Thanks.

April 6, 2015 at 6:15 am

This reply has been marked as private.

April 6, 2015 at 6:29 am

Hi there,

Upon checking, your website is still having those JS errors (see: http://prntscr.com/6q8blk). In this case, you could try testing for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

After that, try inserting your custom javascript back and see if it resolves the issue.

Thanks!

April 6, 2015 at 10:50 am

The issues you pointed out were not the cause. One was some issue with Mailchimp and the other with Facebook Feed. I have disabled them but the scrolling issue still occurs. I read in another forum scroll link issue that it had something to do with the anchor pointing to the Accordion content and not the top of the accordion? If this is the case how do I make the link at the top of the accordion?

April 6, 2015 at 11:51 am

Hi there,

In that case, try replacing your JS for the accordions with following:

jQuery(function($) {
    $(document).ready(function() {
        x_scroll_to_accordion($, $('.x-accordion-toggle[href="#' + location.href.split("#").slice(-1)[0] + '"]'));
    });
    $('.link_to_accordion').off('click');
    $('.link_to_accordion').click(function(e) {
        e.preventDefault();
        x_scroll_to_accordion($, $('.x-accordion-toggle[href="#' + $(this).attr('href').split("#").slice(-1)[0] + '"]'));
    });
});
function x_scroll_to_accordion($, acc_nav) {
    $(acc_nav).click();
    $('html,body').animate({
            scrollTop: jQuery(acc_nav).offset().top - jQuery('.x-navbar').outerHeight() - jQuery('
# wpadminbar').outerHeight() - 1
        }, 500 );
}
var $document = jQuery(document),
    $nav = jQuery('.home .x-navbar'),
    className = 'x-navbar-fixed-top';
$document.scroll(function() {
    if ($document.scrollTop() >= 50) {
        $nav.addClass(className);
    } else {
        $nav.removeClass(className);
    }
});

Thanks!

April 6, 2015 at 11:59 am

Thanks for your help, I have replaced the code, but I am still getting the same random results, sometimes scrolling to the top of the accordion, sometimes to the bottom?

April 6, 2015 at 12:15 pm

Hi there,

This is because your accordion is set to close first if another accordion item is selected. That is the reason of this issue. You can try this custom JavaScript to achieve your desired results:

jQuery(function($) {
    $(document).ready(function() {
        x_scroll_to_accordion($, $('.x-accordion-toggle[href="#' + location.href.split("#").slice(-1)[0] + '"]'));
    });
    $('.link_to_accordion').off('click');
    $('.link_to_accordion').click(function(e) {
        e.preventDefault();
        x_scroll_to_accordion($, $('.x-accordion-toggle[href="#' + $(this).attr('href').split("#").slice(-1)[0] + '"]'));
    });
});
function x_scroll_to_accordion($, acc_nav) {
    $(acc_nav).click();
    setTimeout(function() {
        $('html,body').animate({
            scrollTop: jQuery(acc_nav).offset().top - jQuery('.x-navbar').outerHeight() - jQuery('
# wpadminbar').outerHeight() - 1
        }, 500 );
    }, 500);
}
var $document = jQuery(document),
    $nav = jQuery('.home .x-navbar'),
    className = 'x-navbar-fixed-top';
$document.scroll(function() {
    if ($document.scrollTop() >= 50) {
        $nav.addClass(className);
    } else {
        $nav.removeClass(className);
    }
});

This function will add a timeout of 500ms, so when you click the button, it will first close the current accordion item and then scroll to the new accordion item.

Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities.

How to set scroll position to top using jQuery?

Method 2: Using scrollTop() in jQuery This behavior can be used to scroll to the top of the page by applying this method on the window property. Setting the position parameter to 0 scrolls the page to the top. Syntax: $(window).

How do you move to the top of the page in jQuery?

Scroll to the top of the page with jQuery. JavaScript Code : $("a[href='

top']"). click(function() { $("html, body").

What is the scroll top of an element in jQuery?

jQuery scrollTop() MethodThe scrollTop() method sets or returns the vertical scrollbar position for the selected elements. Tip: When the scrollbar is on the top, the position is 0. When used to return the position: This method returns the vertical position of the scrollbar for the FIRST matched element.

How to scrollTo top of page in JavaScript?

You might need to trigger scrolling within JavaScript, in which case: window. scrollTo(0, 0); …is a sure bet to scroll the window (or any other element) back to the top.