I'm trying to figure out the solution for this issue. Whenever the carousel slides moves or slides on rolling, page scroll to top of the screen.

Reference Site: .html

How to replicate: scroll down to half of the banner slider and make sure carousel slide banner is visible to you

I'm trying to figure out the solution for this issue. Whenever the carousel slides moves or slides on rolling, page scroll to top of the screen.

Reference Site: http://www.resmed./uk/en/index.html

How to replicate: scroll down to half of the banner slider and make sure carousel slide banner is visible to you

• javascript
• google-chrome
• scroll
• jquery-plugins
• caroufredsel

• You need to provide code that you have tried. We can't help you with just a reference site. – Ravi Patel Commented Feb 13, 2017 at 10:47
• Hi Ravi patel, Since i'm new to this blog not able to add the 500 lines of code. – Prabhu Shanmugam Commented Feb 14, 2017 at 6:34
• JSFIDDLE link: jsfiddle/prabhumachismo/4aqk4gtz/1/… – Prabhu Shanmugam Commented Feb 14, 2017 at 7:14
• Oddly we are having the exact same issue in a production site. We are using version 6.2.1. of carouFredSel. – tidmutt Commented Feb 14, 2017 at 17:16
• Looks like it was a change in Chrome. We cannot reproduce in other browsers and other evidence suggests it's chrome. Setting fade off resolves the problem for us. – tidmutt Commented Feb 14, 2017 at 18:08

4 Answers 4

Example solution (#featured_slider - slider id):

#featured_slider:before {
    content: '';
    position:absolute;
    width:100%;
    height:100%;
}

I have been searching for the same answer for a while as well. It seems to be a bug introduced in Chrome 57 for fade effects on the caroufredsel.js.

I am not 100% why this works but I have managed to get a fix anyway.

I have basically created a div inside the carousel wrapper which overlays the whole slideshow. This then stops it from jumping to the top of the screen again.

Hope this solves your problem. :)

.chrome-fix {
    position:absolute;
    width:100%;
    height:100%;
}

            <div class="caroufredsel_wrapper">
                <div class="chrome-fix"></div>
                <ul id="foo2">
                    <li>
                        <img src="/img.jpg" alt="" />
                    </li>
                    <li>
                        <img src="/img2.jpg" alt="" />
                    </li>
                    <li>
                        <img src="/img3.jpg" alt="" />
                    </li>
                    <li>
                        <img src="/img4.jpg" alt="" />
                    </li>
                </ul>
            </div>

I was able to fix this issue by adding the CSS overflow-anchor: none; to the .slider-item element

I think it has something to do with how later versions of Chrome handle scroll position when HTML content changes.

Change the transition type (scroll fx) to something different My scroll settings which doesn't cause the page to scroll to top (before the fx property was set to 'crossfade'):

scroll: { duration: 600, timeoutDuration: 8000, fx: 'cover' },

The fx property can have these values (I haven't tested them all, you have to test to see which of them works and which of the working ones you prefer): "none", "scroll", "directscroll", "fade", "crossfade", "cover", "cover-fade", "uncover" or "uncover-fade"