SitePoint Sponsor

User Tag List

Results 1 to 20 of 20

Thread: Anchor Tag

Threaded View

  1. #1
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post Anchor Tag

    Hi All,

    Im New Here,

    Actually Im Designing a Single Page Website with four <section> tags

    So when an User Clicks a Specific Link it has to go to that Section

    Everything is Working Fine instead,

    When i Click any of those links it goes to the top of the page instead of the particular section

    this is my html markup

    HTML Code:
    <div class="navbg">
    <nav> 
        			<ul>
        				<li><a class="introlink anchorLink" href="#intro">intro</a></li>
        				<li><a class="portfoliolink anchorLink" href="#portfolio">about</a></li>
        				<li><a class="aboutlink anchorLink" href="#about">portfolio</a></li>
        				<li><a class="contactlink anchorLink" href="#contact">contact</a></li>
        			</ul>				
        		</nav>
    </div>
    this is my css markup

    Code CSS:
    header { width: 100%;  float: left; position:fixed; top:0px; }
     
    #headercontainer { width: 100%; height:76px; background-image:url(images/navbgcrack3.png); }
     
    header section  nav{ display:block;}
     
    #logo { float:left; margin-top:20px; margin-left:20px; border:0px;}
     
    .navbg { background-image:url(images/mainnavbg.png); width:364px; height:71px; margin-left:350px; float:left;}
     
    nav { width: auto; }
     
    nav ul {  position: absolute; margin-top:25px;   }
     
    nav ul li { font-family:Arial, Helvetica, sans-serif; font-size:16px;  display: inline; margin-left:20px;   }
     
    nav ul li a{ color:#47453f; border-bottom: none; text-decoration:none;}

    this is my jquery

    Code JavaScript:
    $(document).ready(function() {
    	$("a.anchorLink").anchorAnimate()
    });
     
    jQuery.fn.anchorAnimate = function(settings) {
     
     	settings = jQuery.extend({
    		speed : 500
    	}, settings);	
     
    	return this.each(function(){
    		var caller = this
    		$(caller).click(function (event) {	
    			event.preventDefault()
    			var locationHref = window.location.href
    			var elementClick = $(caller).attr("href")
     
    			var destination = $(elementClick).offset().top;
    			$("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, settings.speed, function() {
    				window.location.hash = elementClick
    			});
    		  	return false;
    		})
    	})
    }
    your help is appreciated
    Last edited by Stevie D; Nov 1, 2012 at 06:58. Reason: Code tags added


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
  •