Bir div kullanarak ilerleyin jquery

SORU

8 AĞUSTOS 2010, Pazar

Bir div kullanarak ilerleyin jquery

tarafında sabit bağlantı çubuğu içeren bir sayfa var. Farklı divs ilerleyin etmek istiyorum. Temelde sayfası farklı divs tarafa menü kutusunu kullanarak ilerleyin istediğim sadece uzun bir web sitesi. Burada şimdiye kadar var olan bir WordPress kullanmak

 $(document).ready(function() {

 $('#contactlink').click = function (){
  $(document).scrollTo('#contact');
 } 

 });

Sorunu otomatik olarak temas yüklediğinde div gidiyor, sonra menüde #contactlink ben basın geri en üstüne kaydırır.

EDİT: HTML

<!DOCTYPE html>

<html lang="en">

    <head>
    <meta charset="utf-8">

    <!-- jQuery-->
    <script src = "<?php echo base_url() ?>assets/js/jquery.js"></script>

    <!-- .js file-->
    <script src = "<?php echo base_url() ?>assets/js/pagetwo.js"></script>

    <link rel="stylesheet" type="text/css" href="<?php echo base_url()?>assets/css/reset.css" />    

    <!-- .css for page -->
    <link rel="stylesheet" type="text/css" href="<?php echo base_url()?>assets/css/pagetwo.css"/>                       

    <!-- page title-->
    <title><!-- Insert Title --></title>


</head>
<body>
    <div id="container">

        <div id="sidebar">
            <ul>
                <li><a id = "aboutlink" href="#">auck</a></li>
                <li><a id = "peojectslink" href="#">Projects</a></li>
                <li><a id = "resumelink" href="#">Resume</a></li>
                <li><a id = "contactlink" href="#">Contact</a></li>
            </ul>
        </div>

        <div id="content">
            <div class="" id="about">
                <p class="header">uck</p>
                <p class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
            <div class="sections"id="projects">
                <p class = "header">Projects</p>
                <p class="info">Projects</p>
            </div>
            <div class="sections" id="resume">
                <p class = "header">Resume</p>
                <p class="info">Resume</p>
            </div>
            <div class="sections" id="contacts">
                <p class = "header">Contact</p>
                <p class="info">Contact</p>
            </div>
        </div>



    </div>
</body>

Yardım için teşekkürler

CEVAP

8 AĞUSTOS 2010, Pazar

İlk olarak,kodunuz contact div içermiyor, contacts bir div var!!!

Kenar Çubuğu contacts sayfanın altındaki div contact var. s kodu için son örnek çıkardım. (ayrıca Kenar Çubuğu projectslink kimliği yanlış yazılmış).

İkinci dil eklentisi başvuru sayfasında click için bazı örnekler bir göz atın. Nesneye click bağlamak için object.click( function() { // Your code here } ); ' I kullanmak zorunda.... Benim örnekte olduğu gibi. Bir kenara olarak, aynı zamanda sadece bağımsız object.click() gibi olmadan kullanarak bir nesne üzerinde bir tıklama tetikleyebilir.

Üçüncü olarak, scrollTo jQuery plugin. Eğer eklenti yüklü bilmiyorum. Eklenti olmadan scrollTo() kullanamazsınız. Bu durumda, arzu ettiğiniz işlevselliği eklenti kullanmak için bir sebep göremiyorum yani kod sadece 2 satır.

Tamam, bir çözüm artık.

Aşağıdaki kod kenar çubuğundaki bir bağlantıyı doğru div ilerleyin. Pencere kaydırma izin vermek için yeterince büyük olmak zorunda mı:

  // This is a functions that scrolls to #{blah}link
function goToByScroll(id){
      // Remove "link" from the ID
    id = id.replace("link", "");
      // Scroll
    $('html,body').animate({
        scrollTop: $("#" id).offset().top},
        'slow');
}

$("#sidebar > ul > li > a").click(function(e) { 
      // Prevent a page reload when a link is pressed
    e.preventDefault(); 
      // Call the scroll function
    goToByScroll(this.id);           
});

Live Example

( Fonksiyon here alınan) ilerleyin

PS: çapa etiketleri kullanmak yerine bu yolu gitmek için zorlayıcı bir sebep olmalı Açıkçası<a href="#gohere">blah</a> ... <a name="gohere">blah title</a>

Bunu Paylaş: