2017-02-04 22 views
-2
頁面

的底部。最好不是任何Jquery,我還是不太滿意。使我的按鈕跳轉用戶我想點擊時,無需中斷我的其他代碼我的按鈕跳轉到頁面底部

<div id="phrases"> 
    <a href="#" class="refresh" id="refresh">Fun Fact!</a> 
    <style> 
    .refresh { 
     -moz-box-shadow: 4px 4px 5px 1px #899599; 
     -webkit-box-shadow: 4px 4px 5px 1px #899599; 
     box-shadow: 4px 4px 5px 1px #899599; 
     background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #bab1ba)); 
     background:-moz-linear-gradient(top, #ededed 5%, #bab1ba 100%); 
     background:-webkit-linear-gradient(top, #ededed 5%, #bab1ba 100%); 
     background:-o-linear-gradient(top, #ededed 5%, #bab1ba 100%); 
     background:-ms-linear-gradient(top, #ededed 5%, #bab1ba 100%); 
     background:linear-gradient(to bottom, #ededed 5%, #bab1ba 100%); 
     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#bab1ba',GradientType=0); 
     background-color:#ededed; 
     -moz-border-radius:20px; 
     -webkit-border-radius:20px; 
     border-radius:20px; 
     border:1px solid #d6bcd6; 
     display:inline-block; 
     cursor:pointer; 
     color:#3a8a9e; 
     font-family:Verdana; 
     font-size:20px; 
     padding:14px 59px; 
     text-decoration:none; 
     text-shadow:-1px -1px 5px #e1e2ed; 
    } 
    .refresh:hover { 
     background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #bab1ba), color-stop(1, #ededed)); 
     background:-moz-linear-gradient(top, #bab1ba 5%, #ededed 100%); 
     background:-webkit-linear-gradient(top, #bab1ba 5%, #ededed 100%); 
     background:-o-linear-gradient(top, #bab1ba 5%, #ededed 100%); 
     background:-ms-linear-gradient(top, #bab1ba 5%, #ededed 100%); 
     background:linear-gradient(to bottom, #bab1ba 5%, #ededed 100%); 
     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bab1ba', endColorstr='#ededed',GradientType=0); 
     background-color:#bab1ba; 
     text-shadow: 2px 1px gray; 
    } 
    .refresh:active { 
     position:relative; 
     top:1px; 
    } 

    h2 { 
     font-size: 1.5em; 
     margin: 40px; 
     padding: 70px; 
    } 
    </style> 

對不起,我的按鈕的長塊CSS,我不知道是否有必要。如果不需要,有人讓我知道,我會刪除它。這裏是按鈕的Javascript。

<script> 
    var refreshBtn = document.getElementById('refresh'), 
     textHolder = document.getElementById('text'), 
     textArray = [ 
     'Raw horse meat is a popular food in Japan.', 
     'Sometimes the trains are so crowded railway staff are employed to cram passengers inside.', 
     'Many couples in Japan celebrate Christmas like Valentines Day. It is definitely more of a "lovers" holiday in Japan.', 
     'Poorly written English can be found everywhere, including T-shirts and other fashion items.', 
     'More than 70% of Japan consists of mountains, including more than 200 volcanoes.', 
     'Mt. Fuji, the tallest mountain in Japan, is an active volcano (although scientists have not reached a consensus on what defines "active").', 
     'Religion does not play a big role in the lives of most Japanese and many do not understand the difference between Shintoism and Buddhism. However, there are also many Japanese who do understand the difference.', 
     'A nice musk melon, similar to a cantaloupe, may sell for over $300. For example, a nice specimen of Yubari melon. These are often physically perfect, not like their American counterparts with dark smudges and scars.', 
     'There are four different writing systems in Japan; Romaji, Katakana, Hiragana, and Kanji.', 
     "Coffee is very popular and Japan imports approximately 85% of Jamaica's annual coffee production.", 
     "Japan's literacy rate is almost 100%.", 
     "Sumo is Japan's national sport, although baseball is also very popular.", 
     'Sumo wrestlers eat a stew called Chankonabe to fatten up. Many restaurants in the Ryogoku district of Tokyo serve this nabe (Japanese word for stew).', 
     'Most toilets in Japan have a built-in bidet system for spraying your backside. These are known as washlets and are now the norm in homes and nicer restrooms. However, in some train stations and other public restrooms you may still find the traditional Japanese "floor toilet".', 
     "When you use the restroom in someone's home you may need to put on designated bathroom slippers so as not to contaminate the rest of the home.", 
     'Noodles, especially soba (buckwheat), are slurped somewhat loudly when eaten. It has been said slurping indicates the food is delicious. The slurping also serves to cool down the hot noodles for eating.', 
     'Japan is the world’s largest consumer of Amazon rain forest timber.', 
     'Vending machines in Japan sell beer, hot and cold canned coffee, cigarettes, and other items.', 
     'When moving into an apartment it is often required to give the landlord "gift" money, usually equal to two months rent.', 
     'On average there are around 1,500 earthquakes every year in Japan.', 
     'In Japan it is not uncommon to eat rice at every meal, including breakfast.', 
     'Average life expectancy in Japan is one of the highest in the world. Japanese people live an average of 4 years longer than Americans.', 
     'Japan is the largest automobile producer in the world.', 
     "Tsukiji market in Tokyo is the world's largest fish market.", 
     'Ovens are not nearly as commonplace as rice cookers in Japanese households.', 
     'It was customary in ancient Japan for women to blacken their teeth with dye as white teeth were considered ugly. This practice persisted until the late 1800s. The American style smile (big, wide, and white) would have been seen as "exposing too much bone".', 
     'In addition to a "boneless smile", small eyes, a round puffy face, and plump body were considered attractive features, especially during the Heian period.', 
     "Some Japanese companies conduct a morning exercise session for the workers to prepare them for the day's work.", 
     ], 
     randomIndex = 0, 
     previousIndex = 0; // We'll use that to avoid getting the same text twice in a row 

    refreshBtn.onclick = updateText; 

    function updateText(){ 
     while(randomIndex === previousIndex) { 
      randomIndex = Math.floor(Math.random() * textArray.length); 
     } 
     previousIndex = randomIndex; 
     textHolder.innerHTML = textArray[ randomIndex ]; 
    } 
    </script> 

就是這樣。這可能很簡單,但當我嘗試添加某些內容時,我一直在搞亂代碼。

我能想到的

回答

0

兩種方式:

首先,你可以使用JS滾動到使用

window.scrollTo(0,document.body.scrollHeight); 

二的底部,你可以將代碼添加到您的網頁

底部
<a name="bottom"></a> 

,並使用

document.location.href="#bottom"; 
0

你可以用HTML來做到這一點。把你要跳轉到的HREF屬性的ID,像這樣:

<a href="#jump-here" class="refresh">Jump to the end</a> 

在頁面中,您要鏈接跳轉到的底部,添加一個id上的標籤,像這樣:

<div id="jump-here">Jump Here</div>