CODEWITHSUNDEEP
javascriptjqueryhtml
Shibbir Ahmed
Shibbir Ahmed

Reputation: 161

How to go to specific section using jQuery?

This is my site: http://2helix.com.au/v-04/ It's simple, built with HTML.

Now you can right side navbar. When you click on any link it will show you content. By default all content is hidden.

Now I want to point that section when I click on the link. For example: If I click on social link it's should go to social content section.

I know, If I use this It's should work: 

<li><a class="showSingle social" target="1" href="social">SOCIAL</a></li>
<div id="social"></div>

If I do this then page is open on new window.

How can I smoothly go to that section without new window?

Thanks.

Here is my code: 

<ul class="nav">                            
    <li><a href="mySocial" class="showSingle social" target="1">SOCIAL</a></li>
    <li><a class="showSingle" target="2">DIGITAL</a></li>
    <li><a class="showSingle" target="3">DESIGN</a></li>
    <li><a class="showSingle" target="4">DEVELOPMENT</a></li>
    <li><a href="#contact">CONTACT</a></li>
</ul>               

<div class="container content"> 
    <div class="row">
        <div class="col-md-12">

            <div id="div1 mySocial" class="targetDiv socialContent">
                <h3 class="left"><span>1</span></h3>
                <div class="textContent">
                    <h1><strong>SOCIAL</strong></h1>
                    <p>As Social Media becomes more intrinsic in our daily life’s, </p> 
                </div>
            </div>


            <div id="div2" class="targetDiv">
                <h3 class="left"><span>2</span></h3>
                <div class=" textContent">
                    <h1><strong>DIGITAL</strong></h1>
                    <p>Whethere it's eCommerce, web sites, EDM templates</p>    
                </div>
            </div>

            <div id="div3" class="targetDiv">
                <h3 class="left"><span>3</span></h3>                
                <div class="textContent">                   
                    <h1><strong>DESIGN</strong></h1>
                    <p>Requiremtns for design in social </p>    
                </div>              
            </div>

            <div id="div4" class="targetDiv">
                <h3 class="left"><span>4</span></h3>                
                <div class="textContent">
                    <h1><strong>DEVELOPMENT</strong></h1>
                    <p>Success in Social is standing out</strong></p>   
                </div>
            </div>
        </div>
    </div>
</div>

// jQuery code...
$(document).ready(function(){
    jQuery(function(){      
        jQuery('.showSingle').click(function(){
            jQuery('.content').show();
            jQuery('.targetDiv').hide();
            jQuery('#div'+$(this).attr('target')).show();
        });
    });
});

Upvotes: 0

Views: 2617

Answers (4)

toha
toha

Reputation: 5510

Try to change your jquery code like This:

$(document).ready(function() {
  jQuery(function() {
    jQuery('.showSingle').click(function() {
      jQuery('.content').show();
      jQuery('.targetDiv').hide();
      jQuery('#div' + $(this).attr('target')).show();

      $('html, body').animate({
        scrollTop: $('#div' + $(this).attr('target')).offset().top
      }, 500);
      return false;
    });
  });
});

Upvotes: 1

FluffyKitten
FluffyKitten

Reputation: 14312

You've a huge number of problems with your basic HTML code that you need to fix before you even look at adding jQuery

  1. You cannot give an element 2 ids. <div id="div1 mySocial" class="targetDiv socialContent"> is not valid. You will need to create a separate element for your anchor e.g. <a id="mySocial"></a>

  2. To link to an anchor you need to use # in the href, e.g. <a href="#mySocial" class="social" >

  3. You cannot use target like that. There are specific values that are allowed and numbers are not any of them. Instead you could use the data-target

Now to what you are trying to do with jQuery...
You are hiding all content except for the one you click on, so there is no scrolling required... see the working example below. What exactly are you trying to achieve?

$(document).ready(function(){
    jQuery(function(){      
        jQuery('.showSingle').click(function(){
            jQuery('.content').show();
            jQuery('.targetDiv').hide();
            jQuery('#div'+$(this).data('target')).show();
        });
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">                            
    <li><a href="#mySocial" class="social showSingle" data-target="1">SOCIAL</a></li>
    <li><a href="#digital" class="showSingle" data-target="2">DIGITAL</a></li>
    <li><a href="#design" class="showSingle" data-target="3">DESIGN</a></li>
    <li><a href="#development" class="showSingle" data-target="4">DEVELOPMENT</a></li>
    <li><a href="#contact">CONTACT</a></li>
</ul>               

<div class="container content"> 
    <div class="row">
        <div class="col-md-12">
            <a id="mySocial"></a>
            <div id="div1" class="targetDiv socialContent">
                <h3 class="left"><span>1</span></h3>
                <div class="textContent">
                    <h1><strong>SOCIAL</strong></h1>
                    <p>As Social Media becomes more intrinsic in our daily life’s, </p> 
                </div>
            </div>


            <a id="digital"></a>
            <div id="div2" class="targetDiv">
                <h3 class="left"><span>2</span></h3>
                <div class=" textContent">
                    <h1><strong>DIGITAL</strong></h1>
                    <p>Whethere it's eCommerce, web sites, EDM templates</p>    
                </div>
            </div>

            <a id="design"></a>
            <div id="div3" class="targetDiv">
                <h3 class="left"><span>3</span></h3>                
                <div class="textContent">                   
                    <h1><strong>DESIGN</strong></h1>
                    <p>Requiremtns for design in social </p>    
                </div>              
            </div>

            <a id="development"></a>
            <div id="div4" class="targetDiv">
                <h3 class="left"><span>4</span></h3>                
                <div class="textContent">
                    <h1><strong>DEVELOPMENT</strong></h1>
                    <p>Success in Social is standing out</p>   
                </div>
            </div>
        </div>
    </div>
</div>

Upvotes: 2

Rohit Verma
Rohit Verma

Reputation: 299

Add also this code on click.

jQuery('html').animate({
scrollTop: jQuery(".content").offset().top
});

Upvotes: 0

pieguy
pieguy

Reputation: 95

If you replace 

target = "1"

with 

data-target = "#social"

then the link will jump down to a div with the id = "social"

<li><a class="showSingle social" data-target="social" href="social">SOCIAL</a></li>
<div id="social"></div>

Upvotes: 0

Related Questions