SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot
    Join Date
    Mar 2013
    Location
    Philippines
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Scroll to Element Jquery not working on Chrome or Safari

    I'm having some problems trying to implement this feature on a project I'm working on. Basically the objective is if the user clicks on the "Get Started" Button it will directly scroll on the specified element. The only problem is that it doesn't work on chrome or safari which is very weird and sometimes the website tends to flicker randomly whenever i click on it. I have tried changing my jquery to 1.9 and no luck.

    Here is the website I'm working on

    digitalspin.ph/create/index.html

    **HTML**

    Code:
        <section class="get_started">
        <div class="container_12">
    	    <div class="grid_12 relative">
    	        <h2 id="gs_button"><a href="#company_info"><span>Get<br/> Started</span></a></h2>
    		</div>
    	</div>
        </section>
    
    
        <div class="content">
        <div id="company_info" class="container_12">
            <h2 class="creative_spin_small">Creative Spin</h2>
            <div class="liquid-slider"  id="main-slider">
                <div class="slide1">
                <h2 class="title">Who We Are</h2>
                <div class="custom_column">
    		        <div class="message">
    		            <h3>turning</h3>
    		            <h4>your</h4>
    		            <h5>imagination</h5>
    		            <h6>into <span>reality</span></h6>
    			    </div>
    			</div>
    			<div class="custom_column">
    			grid 6
    			</div>
                </div>
    			
                <div>
                <h2 class="title">What We Can Do</h2>
                <p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
                </div>  	
    			
            </div>
        </div>
        <div class="social">
    	    <ul>
    	        <li><a href="#" target="_blank" alt="Facebook">Facebook</a></li>
    		    <li id="social_twitter"><a href="#" target="_blank" alt="Twitter">Twitter</a></li>
    		</ul>
    	</div>
        </div>
    JAVASCRIPT

    Code:
        <script>
    $(document).ready(function(){
        $("#gs_button a").click(function(e) {// bind anchor here
           $('html, body').animate({
              scrollTop: ($("#company_info").offset().top)
           }, 1200);
           e.preventDefault();// to prevent default working of anchor;
        });
    });
        </script>

  2. #2
    SitePoint Zealot
    Join Date
    Mar 2013
    Location
    Philippines
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Update on my problem. I have been trying to work on fix and even tried using a plugin in order for it to get it working yet the problem still persists. The slider is working perfectly fine on chrome and safari and yet and a simple "scrollTo" feature can't be fix on chrome nor safari.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •