Role para uma div usando jquery

205

então eu tenho uma página que tem uma barra de links fixa ao lado. Eu gostaria de rolar para os diferentes divs. Basicamente, a página é apenas um site longo, onde eu gostaria de rolar para divs diferentes usando a caixa de menu ao lado.

Aqui está o jquery que eu tenho até agora

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

O problema é que ele vai automaticamente para a div de contato quando carrega, e quando pressiono o botão #contactlinkno menu, ele rola de volta para o topo.

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>

Obrigado pela ajuda

jquery  scroll 
— tshauck
fonte
Como é o html para onde deveria estar o link de contato?
— James Black
— James Black
3
Existe uma razão para você usar o jQuery em vez de âncoras antigas simples?
— Brianpeiris 8/08
2
@ James - Isso não é realmente uma duplicata. Esta pergunta rola uma página para divs específicos. Essa pergunta rola uma página por incrementos definidos (independentemente do que as divs estão mostrando).
— precisa saber é o seguinte
Isso é realmente bom: css-tricks.com/snippets/jquery/smooth-scrolling . Trabalhou para mim.
— maahd

Respostas:

342

Primeiro, seu código não contém uma contactdiv, ele tem uma contactsdiv!

Na barra lateral, você tem contacta div na parte inferior da página contacts. Eu removi a final sdo exemplo de código. (você também digitou incorretamente o projectslinkID na barra lateral).

Segundo, dê uma olhada em alguns dos exemplos para clicar na página de referência do jQuery. Você deve usar o click like, object.click( function() { // Your code here } );para vincular um manipulador de eventos click ao objeto .... Como no meu exemplo abaixo. Como um aparte, você também pode apenas acionar um clique em um objeto usando-o sem argumentos, como object.click().

Terceiro, scrollToé um plugin no jQuery. Não sei se você tem o plugin instalado. Você não pode usar scrollTo()sem o plugin. Nesse caso, a funcionalidade que você deseja é de apenas 2 linhas de código, portanto não vejo razão para usar o plug-in.

Ok, agora vamos a uma solução.

O código abaixo irá rolar para a div correta se você clicar em um link na barra lateral. A janela precisa ser grande o suficiente para permitir a rolagem:

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

Exemplo ao vivo

(Role para a função retirada daqui )

PS: Obviamente, você deve ter um motivo convincente para seguir esse caminho, em vez de usar tags âncora <a href="#gohere">blah</a>...<a name="gohere">blah title</a>

— Peter Ajtai
fonte
Fico feliz em saber que ajudou, mas acho que você quer dizer "picles", embora eu ache melhor comê-los do que sair deles.
— Peter Ajtai
Não rola no primeiro clique. : / Clico na segunda vez e funciona.
— Burak Karakuş 26/09/14
Eu acho que é mais lógico colocar o ID no href assim: href = "# about" jsfiddle.net/onigetoc/w5muyern
— Gino
não funciona na primeira vez. mas quando clicamos na 2ª vez, ele funciona perfeitamente.
— Satish Singh
115

Não há .scrollTo()método no jQuery, mas existe .scrollTop()um. .scrollTopespera um parâmetro, ou seja, o valor do pixel para o qual a barra de rolagem deve rolar.

Exemplo:

$(window).scrollTop(200);

irá rolar a janela (se houver conteúdo suficiente).

Então você pode obter esse valor desejado com .offset()ou .position().

Exemplo:

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

Isso deve rolar o #contactelemento para exibição.

O método alternativo não-jQuery é .scrollIntoView(). Você pode chamar esse método de qualquer maneira DOM element:

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

trueindica que o elemento está posicionado na parte superior, enquanto o falsecolocaria na parte inferior da vista. O bom do método jQuery é que você pode usá-lo com o fx functionslike .animate(). Então você pode suavizar a rolagem de algo.

Referência: .scrollTop () , .position () , .offset ()

— jAndy
fonte
Receio que ainda esteja tendo problemas semelhantes. A página carrega a página rolada para baixo em uma certa quantidade, não a divisão de contatos, e o link também não me leva à divisão de contatos. Obrigado tho. EDIT: digamos que eu estou espaçando as divs usando top com css, isso faria com que ela fosse para o lugar errado? Apenas um pensamento.
— tshauck
22

podes tentar : 

$("#MediaPlayer").ready(function(){
    $("html, body").delay(2000).animate({
        scrollTop: $('#MediaPlayer').offset().top 
    }, 2000);
});
— Vlogs de TI
fonte
13

Adicione esta pequena função e use-a da seguinte forma: $('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
fonte
6

OK pessoal, essa é uma solução pequena, mas funciona bem.

suponha o seguinte código:

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

você deseja que quando uma nova postagem for adicionada a 'the_div_holder', ela role seu conteúdo interno (o div .post) até o último como um bate-papo. Portanto, faça o seguinte sempre que um novo .post for adicionado ao principal titular de 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'));
— cristão
fonte
3

Primeiro, obtenha a posição do elemento div até a qual você deseja rolar pelo método jQuery position ().
Exemplo: var pos = $ ("div"). Position ();
Em seguida, obtenha os cordinados y (altura) desse elemento com o método " .top ".
Exemplo: pos.top;
Em seguida, obtenha os cordinados x do elemento div com o método " .left ".
Esses métodos são originários do posicionamento CSS.
Quando obtivermos os cordinatos x e y, podemos usar o scrollTo () do javascript ; método.
Esse método rola o documento até a altura e largura específicas.
São necessários dois parâmetros como cordas x e y. Sintaxe: window.scrollTo (x, y);
Em seguida, passe os cordinados x e y do elemento DIV na função scrollTo () .
Consulte o exemplo abaixo ↓ ↓

<!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
fonte
E hay adicione alguma explicação em texto do que você fez, apenas não faz muito sentido .. !!
— Clain Dsilva
Como o @ClainDsilva disse, adicione algumas explicações textuais.
— precisa
-1

Não há necessidade também destes. Simplesmente adicione div id ao href de uma tag <a>

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

Bem desse jeito.

— Armin Akhlagh
fonte
Por favor, jogue mais luz sobre isso. Não funcionou para mim.
— Ifesinachi Bryan
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.