Przewiń do div za pomocą jquery

205

więc mam stronę, która ma stały pasek linków z boku. Chciałbym przewinąć do różnych div. Zasadniczo strona to tylko jedna długa strona internetowa, w której chciałbym przewijać różne divy, używając pola menu z boku.

Oto jquery, które mam do tej pory

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

Problem polega na tym, że automatycznie przechodzi do div kontaktu, gdy się ładuje, a następnie po naciśnięciu #contactlinkw menu przewija się z powrotem na górę.

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

jquery  scroll 
— tshauck
źródło
Jak wygląda HTML w miejscu, w którym powinien znajdować się link kontaktowy?
— James Black
— James Black
3
Czy istnieje powód, dla którego używasz jQuery zamiast zwykłych starych kotwic?
— brianpeiris,
2
@James - To naprawdę nie jest duplikat. To pytanie przewija stronę do określonych elementów div. To pytanie przewija stronę o zdefiniowane przyrosty (niezależnie od tego, co pokazuje div).
— Peter Ajtai,
To jest naprawdę dobre: css-tricks.com/snippets/jquery/smooth-scrolling . Pracował dla mnie.
— maahd

Odpowiedzi:

342

Po pierwsze, twój kod nie zawiera contactdiv, ma contactsdiv!

Na pasku bocznym masz contactdiv w dolnej części strony, którą masz contacts. Usunąłem końcowy sprzykładowy kod. (źle wpisałeś projectslinkidentyfikator na pasku bocznym).

Po drugie, spójrz na niektóre przykłady kliknięcia na stronie referencyjnej jQuery. Musisz użyć funkcji „kliknij jak”, object.click( function() { // Your code here } );aby powiązać moduł obsługi zdarzenia kliknięcia z obiektem .... Jak w moim przykładzie poniżej. Nawiasem mówiąc, możesz także wywołać kliknięcie obiektu, używając go bez argumentów, takich jak object.click().

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

Ok, teraz rozwiązanie.

Poniższy kod przewinie się do odpowiedniego div, jeśli klikniesz link na pasku bocznym. Okno musi być wystarczająco duże, 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);
});

Przykład na żywo

(Przewiń do funkcji pobranej stąd )

PS: Oczywiście powinieneś mieć ważny powód, aby iść tą drogą zamiast używać tagów kotwicy <a href="#gohere">blah</a>...<a name="gohere">blah title</a>

— Peter Ajtai
źródło
Cieszę się, że to pomogło, ale myślę, że masz na myśli „marynowane”, chociaż uważam, że lepiej je jeść niż się z nich wydostać.
— Peter Ajtai
Nie przewija się przy pierwszym kliknięciu. : / Klikam go po raz drugi i działa.
— Burak Karakuş
Myślę, że bardziej logiczne jest umieszczenie identyfikatora w href w następujący sposób: href = "# about" jsfiddle.net/onigetoc/w5muyern
— Gino
nie działa za pierwszym razem. ale kiedy klikniemy drugi raz, to działa idealnie.
— Satish Singh,
115

W .scrollTo()jQuery nie ma metody, ale jest .scrollTop()jedna. .scrollTopoczekuje parametru, czyli wartości w pikselach, do której powinien przewijać pasek przewijania.

Przykład:

$(window).scrollTop(200);

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

Tak więc możesz uzyskać tę pożądaną wartość za pomocą .offset()lub .position().

Przykład:

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

Powinno to przewinąć #contactelement do widoku.

Alternatywną metodą inną niż jQuery jest .scrollIntoView(). Możesz wywołać tę metodę w dowolny sposób DOM element:

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

truewskazuje, że element jest umieszczony na górze, podczas gdy falseumieściłby go na dole widoku. Zaletą metody jQuery jest to, że można jej nawet używać z fx functionspodobnymi .animate(). Możesz więc płynnie przewijać coś.

Odwołanie: .scrollTop () , .position () , .offset ()

— jAndy
źródło
Obawiam się, że nadal mam podobne problemy. Ładunki strony przewijały stronę w dół o określoną wartość, a nie div kontaktu, a także link nie prowadzi mnie do div kontaktu. Dziękuję EDYCJA: powiedzmy, że rozstawiam divy używając top z css, czy spowodowałoby to, że poszedłoby w niewłaściwe miejsce? Tylko myśl.
— tshauck
22

możesz spróbować : 

$("#MediaPlayer").ready(function(){
    $("html, body").delay(2000).animate({
        scrollTop: $('#MediaPlayer').offset().top 
    }, 2000);
});
— Vlogi IT
źródło
13

Dodaj tę małą funkcję i użyj jej w ten sposób: $('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
źródło
6

OK, 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, gdy nowy post zostanie dodany do 'the_div_holder', a następnie przewinie jego wewnętrzną zawartość (. div div) do ostatniego jak na czacie. Tak, wykonaj następujące czynności za każdym razem, gdy nowy główny słupek zostanie dodany do głównego uchwytu div:

var scroll = function(div) {
    var totalHeight = 0;
    div.find('.post').each(function(){
       totalHeight += $(this).outerHeight();
    });
    div.scrollTop(totalHeight);
  }
  // call it:
  scroll($('#the_div_holder'));
— chrześcijanin
źródło
3

Najpierw uzyskaj pozycję elementu div do góry, którą chcesz przewijać metodą jQuery position ().
Przykład: var pos = $ („div”). Position ();
Następnie uzyskaj y cordinates (wysokość) tego elementu metodą „ .top ”.
Przykład: pos.top;
Następnie uzyskaj x cordinates tego elementu div za pomocą metody „ .left ”.
Metody te pochodzą z pozycjonowania CSS.
Gdy otrzymamy x & y cordinates, możemy użyć scrollTo () w javascript metoda.
Ta metoda przewija dokument do określonej wysokości i szerokości.
Przyjmuje dwa parametry, gdy x & y kordynuje. Składnia: window.scrollTo (x, y);
Następnie po prostu przekaż cordinate x & y elementu DIV w funkcji scrollTo () .
Zobacz 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>
— Sayyed Salman
źródło
I siano dodaj tekstowe wyjaśnienie tego, co zrobiłeś, po prostu nie ma to większego sensu .. !!
— Clain Dsilva
Jak powiedział @ClainDsilva, dodaj wyjaśnienie tekstowe.
— SreekanthGS
-1

Te też nie są potrzebne. Wystarczy dodać identyfikator div do href znacznika <a>

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

Właśnie tak.

— Armin Akhlagh
źródło
Proszę rzucić na to więcej światła. Nie działało to dla mnie.
— Ifesinachi Bryan
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.