sroll page #div

嗨，我有一個高度爲總可見區域200％的頁面，這意味着大約有兩個頁面在另一個之上。我必須滾動到底部才能查看另一半頁面。我將完整的<body>分成兩個div，每個高度爲100％。sroll page #div

在DIV1，我給這樣的DIV2，其作品的鏈接，

<div id="div1" class="mystyle1"> 
<a href="#div2">Click Me To Go To DIV2</div> 


<div id="div2" class="mystyle2"> 
<a href="#div1">Click Me To Go To DIV1</div>

這工作，但它滾動的瞬間，我需要它是光滑的，以便用戶可以看到過渡。我也嘗試在CSS中設置：

-webkit-transistion: all 1s ease-in-out;

不幸運！請幫忙。

來源

2013-01-11 Samarth Agarwal

你確定這是用CSS3實現？我真的很感興趣看到你用於轉換的完整CSS。 –

我這可能使用'＃div2：target'僞類。沒有？看我是初學者，尋求幫助。 –

http://stackoverflow.com/questions/6657947/how-to-use-css3-transition-to-customize-page-scrolling –

你可以使用jquery方便地實現這個。谷歌搜索關鍵字如animated scroll to top和animate scroll to ID會給你一個想法。

做一個快速小提琴，也許這要發生的事情：http://jsfiddle.net/g5D33/

順便說一句，你有你的代碼的一些小錯別字，像<a>標籤與關閉標籤缺失以及與s拼寫的轉換。 ;）

來源

2013-01-11 05:52:32 Anne

小提琴正是我想要的，但是當我複製所有這些，並試圖運行時，它不起作用。爲什麼？ –

謝謝，我第一次使用JQuery。 –

您需要調用Jquery腳本才能使其生效。將此項包含在您的「頭部」標記中： '' – Anne

對於我總是用一個小的jQuery函數

$('a[href^="#"]').click(function(){ 
     var scroll_el = $(this).attr('href'); 
     if ($(scroll_el).length != 0) { 
        $('html, body').animate({ scrollTop: $(scroll_el).offset().top }, 700); 
     } 
     return false; 
});

JSFIDDLE

對於horisontally滾動：

$('a[href^="#"]').click(function(){ 
      var scroll_el = $(this).attr('href'); 
      if ($(scroll_el).length != 0) { 
         $('html, body').animate({ scrollLeft: $(scroll_el).offset().left }, 700); 
      } 
      return false; 
    });

JSFIDDLE

來源

2015-08-04 12:10:47 Julia

回答

相關問題