Jquery kullanarak div öğesine gidin

205

bu yüzden yan tarafında sabit bir bağlantı çubuğu olan bir sayfam var. Farklı div'lere geçmek istiyorum. Temelde sayfa sadece bir uzun web sitesi, burada menü kutusunu kullanarak farklı div için kaydırmak istiyorum.

İşte şimdiye kadar sahip olduğum jquery

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

Sorun, yüklendiğinde otomatik olarak kişi div'e gitmesi, ardından #contactlinkmenüde düğmesine bastığımda en üste geri kayması.

DÜZENLE: 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

jquery scroll

— tshauck
kaynak

İletişim bağlantısının nerede olması gerektiği için html neye benziyor?

— James Black

Bu stackoverflow.com/questions/1193414/scrolling-a-div-with-jquery

— James Black

3

Eski düz çapalar yerine jQuery kullanmanızın bir nedeni var mı?

— brianpeiris

2

@James - Bu gerçekten bir kopya değil. Bu soru, sayfayı belirli div'lara kaydırır. Bu soru, bir sayfayı tanımlı artışlarla kaydırır (hangi div'lerin gösterildiğinden bağımsız olarak).

— Peter Ajtai

Bu gerçekten iyi: css-tricks.com/snippets/jquery/smooth-scrolling . Benim için çalıştı.

— maahd

342

İlk olarak, kodunuz bir contactdiv içermiyor , bir contactsdiv var!

Kenar çubuğunda contact, sayfanın altındaki div öğesinde bulunur contacts. sKod örneği için finali kaldırdım . ( projectslinkkenar çubuğundaki kimliği de yanlış yazdınız).

İkinci olarak, jQuery referans sayfasındaki tıklama örneklerine bir göz atın . object.click( function() { // Your code here } );Bir click olay işleyicisini nesneye bağlamak için click like kullanmanız gerekir .... Aşağıdaki örneğimdeki gibi. Bir kenara, bir nesneyi, gibi bağımsız değişkenler olmadan kullanarak bir tıklamayı da tetikleyebilirsiniz object.click().

Üçüncü olarak, jQuery scrollTobir eklentidir . Eklentinin yüklü olup olmadığını bilmiyorum. scrollTo()Eklenti olmadan kullanamazsınız . Bu durumda, istediğiniz işlevsellik sadece 2 satır kod, bu yüzden eklentiyi kullanmak için hiçbir neden göremiyorum.

Tamam, şimdi bir çözüme geçelim.

Kenar çubuğundaki bir bağlantıyı tıklarsanız aşağıdaki kod doğru div'a kaydırılır. Pencerenin kaydırmaya izin verecek kadar büyük olması gerekir:

// 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);
});

Canlı Örnek

~~( Buradan alınan işleve ilerleyin )~~

Not: Bağlantı etiketlerini kullanmak yerine bu rotaya gitmek için zorlayıcı bir nedeniniz olmalı <a href="#gohere">blah</a>...<a name="gohere">blah title</a>

— Peter Ajtai
kaynak

Yararlı olduğunu bilmek sevindim, ama sanırım "turşu" demek istiyorsun, ama onları yemekten daha iyi buluyorum.

— Peter Ajtai

İlk tıklamada kaydırılmaz. : / İkinci kez tıklıyorum ve çalışıyor.

— Burak Karakuş

Ben kimliğini böyle href koymak daha mantıklı olduğunu düşünüyorum: href = "# about" jsfiddle.net/onigetoc/w5muyern

— Gino

ilk seferde çalışmaz. ancak 2. kez tıkladığımızda mükemmel çalışır.

— Satish Singh

115

.scrollTo()JQuery'de bir yöntem yok , ama bir .scrollTop()tane var. .scrollTopbir parametre, yani kaydırma çubuğunun kaydırılması gereken piksel değerini bekler.

Misal:

$(window).scrollTop(200);

pencereyi kaydırır (içinde yeterli içerik varsa).

Böylece bu istenen değeri .offset()veya ile alabilirsiniz .position().

Misal:

$(window).scrollTop($('#contact').offset().top);

Bu #contactöğeyi görünüme kaydırmalıdır .

JQuery olmayan alternatif yöntem .scrollIntoView(). Bu yöntemi aşağıdaki DOM elementgibi adlandırabilirsiniz:

$('#contact')[0].scrollIntoView(true);

trueöğenin en üste konumlandırıldığını false, görünümün altına yerleştirileceğini belirtir. JQuery yöntemi ile güzel bir şey bile bunu kullanabilir, olduğu fx functionsgibi .animate(). Böylece bir şeyi düzgün bir şekilde kaydırabilirsiniz.

Referans: .scrollTop () , .position () , .offset ()

— JANDY
kaynak

Korkarım hala benzer problemler yaşıyorum. Sayfa yükleri, kişi bölmesini değil, sayfayı belirli bir miktarda aşağı kaydırdı ve bağlantı beni de kişi bölmesine götürmüyor. Teşekkürler tho. EDIT: css ile üst kullanarak divs aralıklı diyorum, bu yanlış yere gitmesine neden olur? Sadece bir düşünce.

— tshauck

22

deneyebilirsin :

$("#MediaPlayer").ready(function(){
    $("html, body").delay(2000).animate({
        scrollTop: $('#MediaPlayer').offset().top 
    }, 2000);
});

— BT Vlog'ları
kaynak

13

Bu küçük işlevi ekleyin ve şu şekilde kullanın: $('div').scrollTo(500);

jQuery.fn.extend(
{
  scrollTo : function(speed, easing)
  {
    return this.each(function()
    {
      var targetOffset = $(this).offset().top;
      $('html,body').animate({scrollTop: targetOffset}, speed, easing);
    });
  }
});

— Ryan
kaynak

6

Tamam çocuklar, bu küçük bir çözüm, ama iyi çalışıyor.

aşağıdaki kodu varsayalım:

<div id='the_div_holder' style='height: 400px; overflow-y: scroll'>
  <div class='post'>1st post</div>
  <div class='post'>2nd post</div>
  <div class='post'>3rd post</div>
</div>

'the_div_holder' öğesine yeni bir yazı eklendiğinde, iç içeriğini (div .post) sohbet gibi sonuncuya kaydırır. Bu nedenle, ana div sahibine yeni bir .post eklendiğinde aşağıdakileri yapın:

var scroll = function(div) {
    var totalHeight = 0;
    div.find('.post').each(function(){
       totalHeight += $(this).outerHeight();
    });
    div.scrollTop(totalHeight);
  }
  // call it:
  scroll($('#the_div_holder'));

— Hristiyan
kaynak

3

Önce u öğesinin jQuery position () yöntemiyle kaydırmak istediğiniz div öğesinin konumunu alın.
Örnek: var pos = $ ("div"). Position ();
Sonra " .top " yöntemiyle o elemanın y kordinatlarını (yükseklik) alın .
Örnek: pos.top;
Sonra bu div öğesinin x kordinatlarını " .left " yöntemiyle alın.
Bu yöntemler CSS konumlandırmasından kaynaklanır.
X & y cordinates'i aldıktan sonra, javascript'in scrollTo () yöntemini kullanabiliriz ; yöntem.
Bu yöntem belgeyi belirli bir yükseklik ve genişliğe kaydırır.
X & y kordine olurken iki parametre alır. Sözdizimi: window.scrollTo (x, y);
Ardından DIV öğesinin x & y kordinatlarını scrollTo () işlevine geçirin .
Aşağıdaki örneğe bakın ↓ ↓

<!DOCTYPE HTML>
    <html>
    <head>
        <title>
            Scroll upto Div with jQuery.
        </title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script>
            $(document).ready(function () {
                $("#button1").click(function () {
                    var x = $("#element").position(); //gets the position of the div element...
                    window.scrollTo(x.left, x.top); //window.scrollTo() scrolls the page upto certain position....
                    //it takes 2 parameters : (x axis cordinate, y axis cordinate);
                });
            });
            </script>
    </head>
    <body>
        <button id="button1">
            Click here to scroll
        </button>

        <div id="element" style="position:absolute;top:200%;left:0%;background-color:orange;height:100px;width:200px;">
            The DIV element.
            </div>
        </body>
    </html>

— Sayyed Salman
kaynak

Ve saman ne yaptığını bazı metin açıklama ekleyin, sadece çok mantıklı değil .. !!

— Clain Dsilva

@ClainDsilva'nın dediği gibi, lütfen bazı metinsel açıklamalar ekleyin.

— SreekanthGS

-1

Bunlara da gerek yok. Sadece basit eklemek div id için bir <a> etiketinin href

<li><a id = "aboutlink" href="#about">auck</a></li>

Aynen böyle.

— Armin Akhlagh
kaynak

Lütfen buna daha fazla ışık tut. Benim için işe yaramadı.

— Ifesinachi Bryan