Przewiń do div używając jquery

176

, więc mam stronę, która ma stały pasek po stronie. Chciałbym przewinąć do różnych elementów div. Zasadniczo strona to tylko jedna długa witryna, w której chciałbym przewinąć do różnych elementów div za pomocą pola menu na bok. Oto jquery mam tak dalekoPrzewiń do div używając jquery

$(document).ready(function() { 

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

});

Kwestia ta jest automatycznie przechodząc do div kontaktowej podczas ładowania, a następnie po naciśnięciu #contactlink w menu przewija powrotem na górę.

EDIT: 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>

Dzięki za pomoc

Źródło

2010-08-08 tshauck

Co html wyglądać dla których związek kontakt powinien być? –

Może to być duplikat http: // stackoverflow.com/questions/1193414/scrolling-a-div-with-jquery –

Czy istnieje powód, dla którego używasz jQuery zamiast zwykłych starych kotwic? – brianpeiris

295

pierwsze, Twój kod nie zawiera contact div, ma contacts div!

Na pasku bocznym masz contact w dziale w dolnej części strony, którą masz contacts. Usunąłem ostatnią próbkę kodu s. (błędnie zapisałeś też identyfikator projectslink na pasku bocznym).

Po drugie, spójrz na niektóre przykłady dla click na stronie z informacjami o jQuery. Musisz użyć funkcji podobnej do, object.click(function() { // Your code here });, aby powiązać obsługę zdarzeń kliknięcia z obiektem .... Jak w moim przykładzie poniżej. Na marginesie możesz również wywołać kliknięcie obiektu, używając go bez argumentów, takich jak object.click().

Po trzecie, scrollTo jest plugin w jQuery. Nie wiem, czy masz zainstalowaną wtyczkę.Nie można użyć scrollTo() bez wtyczki. W tym przypadku pożądana funkcjonalność to tylko 2 linie kodu, więc nie widzę powodu, aby korzystać z wtyczki.

OK, teraz rozwiązanie.

Poniższy kod przekieruje Cię do właściwego div, jeśli klikniesz link na pasku bocznym. Okno musi być wystarczająco duża, aby umożliwić przewijanie:

// 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

~~(Przewiń funkcjonować zaczerpnięte z here)~~

PS: Oczywiście należy mieć ważny powód aby przejść do tej trasy zamiast używać znaczników zakotwiczających <a href="#gohere">blah</a> ... <a name="gohere">blah title</a>

Źródło

2010-08-08 01:17:13

Cieszę się, że pomogło, ale myślę, że masz na myśli "pikle", choć uważam, że lepiej je jeść niż się z nich wydostać. –

Link referencyjny nie działa – evanmcd

Nie przewija przy pierwszym kliknięciu. :/Klikam to po raz drugi i działa. –

Nie ma .scrollTo() metoda w jQuery, ale jest .scrollTop() jeden. .scrollTop oczekuje parametru, to znaczy wartości pikseli, do której powinien być przewijany pasek przewijania.

Przykład:

$(window).scrollTop(200);

przewinie okno (jeśli jest wystarczająco dużo treści w nim).

Możesz uzyskać tę pożądaną wartość za pomocą .offset() lub .position().

przykład:

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

Należy przesuwanie elementu #contact w widoku.

Nie zastępcza metoda jQuery to .scrollIntoView(). Można nazwać tę metodę na dowolnym DOM element jak:

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

true wskazuje, że element jest umieszczony na górze natomiast false byłoby umieścić go w dolnej części widoku. Zaletą metody jQuery jest to, że można go używać nawet z fx functions, np. .animate(). Możesz płynnie przewinąć coś.

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

Źródło

2010-08-08 01:02:53 jAndy

Obawiam się, że nadal mam podobne problemy. Strona ładuje się przewijając stronę o określoną wielkość, a nie o kontakt div tho, a link nie przenosi mnie również do div kontaktu. Dzięki, tho. EDYCJA: powiedzieć, że jestem odstępy div za pomocą top z css, spowoduje to go do niewłaściwego miejsca? Tylko myśl. – tshauck

Dodaj tę małą funkcję i używać go jako tak: $('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); 
    }); 
    } 
});

Źródło

2010-08-08 02:27:07 Ryan

OK chłopaki, jest to małe rozwiązanie, ale działa dobrze.

załóżmy następujący kod:

<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>

chcesz, kiedy nowy post jest dodawany do „the_div_holder” następnie przewija swoją wewnętrzną treść .post (DIV), aby ostatni jak czat. Tak, wykonaj następujące czynności, gdy nowy .post jest dodawana do głównego posiadacza Gr:

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

Źródło

2013-03-20 01:58:47 christian

można spróbować:

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

Źródło

2014-08-25 14:03:19

Pierwszy uzyskać pozycję elementu div września który u chcą, aby przewinąć metodą jQuery position().
Przykład: var pos = $ ("div"). Position();
Następnie uzyskaj współrzędne (wysokość) tego elementu metodą ".top".
Przykład: pos.top;
Następnie pobierz X współinicjację tego elementu div metodą ".left".
Te metody pochodzą z pozycjonowania CSS.
Gdy otrzymamy x kordinates x &, możemy użyć skryptu javascript scrollTo(); Metoda.
Ta metoda przewija dokument do określonej wysokości & szerokości.
Trwa dwa parametry: x kordinates x &. Składnia: window.scrollTo (x, y); Następnie wystarczy przekazać kordinaty X & y elementu DIV funkcji scrollTo().
Patrz przykład poniżej ↓ ↓

<!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>

Źródło

2015-04-26 06:41:11

I siano dodaj wyjaśnienie tekstowe tego, co zrobiłeś, ale to nie ma większego sensu .. !! –

Jak powiedział @ClainDsilva, proszę dodać wyjaśnienie tekstowe. – SreekanthGS

Przewiń do div używając jquery

Odpowiedz

Powiązane problemy