[js常用]頁面滾動的頂部,指定位置或底部,平滑滾動

番茄西紅柿發(fā)布于2019-04-23 13:08 / 2461人閱讀

摘要：平滑滾動到頂部底部指定地方平滑滾動到頂部底部指定地方這部分是產(chǎn)品介紹這部分是產(chǎn)品介紹這部分是產(chǎn)品介紹這部分是產(chǎn)品介紹這部分是產(chǎn)品介紹返回頂部產(chǎn)品介紹滑到底部

js平滑滾動到頂部、底部、指定地方

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js平滑滾動到頂部、底部、指定地方title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">script>
    <style>
        .box{ height:200px; width:100%; background:#ccc; margin:10px 0;}
        .location{ position:fixed; right:0; bottom:10px; width:20px; background:#FFC; padding:5px; cursor:pointer;color:#003};
    style>
head>
<body>
    <div class="box">div>
    <div class="box">div>
    <div class="box">div>
    <div class="box">div>
    <div class="box a">這部分是產(chǎn)品介紹.這部分是產(chǎn)品介紹這部分是產(chǎn)品介紹這部分是產(chǎn)品介紹這部分是產(chǎn)品介紹div>
    <div class="box">div>
    <div class="box">div>
    <div class="box">div>
    <div class="box">div>
    <div class="box bottom">div>

    <div class="location">
         <p class="scroll_top">返回頂部p>
         <p class="scroll_a">產(chǎn)品介紹p>
         <p class="scroll_bottom">滑到底部p>
    div>
body>
html>
<script type="text/javascript">
    jQuery(document).ready(function($){
        $(.scroll_top).click(function(){$(html,body).animate({scrollTop: 0px}, 800);}); 
        $(.scroll_a).click(function(){$(html,body).animate({scrollTop:$(.a).offset().top}, 800);});
        $(.scroll_bottom).click(function(){$(html,body).animate({scrollTop:$(.bottom).offset().top}, 800);});
    });
script>

云服務(wù)器 GPU云服務(wù)器滾動到指定位置 js平滑滾動視圖平滑滾動 js 設(shè)置頁面滾動

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/1481.html

相關(guān)文章

scrollIntoView 與平滑滾動

摘要：默認(rèn)值為，表示立刻滾到底即表示平滑滾動。這時對錨點(diǎn)內(nèi)鏈觸發(fā)的視口滾動同樣有效。它接受兩種形式的值布爾值或?qū)ο?。接受布爾值主要還是為了兼容不支持平滑滾動老版的瀏覽器。表示行內(nèi)元素排列方向要滾動到的位置。經(jīng)常有這樣的需求：點(diǎn)擊一個鏈接（內(nèi)鏈）跳轉(zhuǎn)到當(dāng)前頁面中間某個部分。對于這樣的需求，很容易想到使用錨點(diǎn)實(shí)現(xiàn)。但有一個問題：滾動一步到位，太生硬了。我還是比較喜歡平滑滾動。HTML5 中提...

darkbug 2019-08-22 13:49 評論0 收藏0
完美實(shí)現(xiàn)一個“回到頂部”

摘要：在瀏覽器中，頁面默認(rèn)滾動是在標(biāo)簽上，移動端大多數(shù)在標(biāo)簽上，在我們想要實(shí)現(xiàn)平滑回到頂部，只需在這兩個標(biāo)簽上都加上準(zhǔn)確的說，寫在容器元素上，可以讓容器非鼠標(biāo)手勢觸發(fā)的滾動變得平滑，而不局限于，標(biāo)簽。前言在實(shí)際應(yīng)用中，經(jīng)常用到滾動到頁面頂部或某個位置，一般簡單用錨點(diǎn)處理或用js將document.body.scrollTop設(shè)置為0，結(jié)果是頁面一閃而過滾到指定位置，不是特別友好。我們想要...

layman 2019-08-29 17:08 評論0 收藏0
完美實(shí)現(xiàn)一個“回到頂部”

摘要：在瀏覽器中，頁面默認(rèn)滾動是在標(biāo)簽上，移動端大多數(shù)在標(biāo)簽上，在我們想要實(shí)現(xiàn)平滑回到頂部，只需在這兩個標(biāo)簽上都加上準(zhǔn)確的說，寫在容器元素上，可以讓容器非鼠標(biāo)手勢觸發(fā)的滾動變得平滑，而不局限于，標(biāo)簽。前言在實(shí)際應(yīng)用中，經(jīng)常用到滾動到頁面頂部或某個位置，一般簡單用錨點(diǎn)處理或用js將document.body.scrollTop設(shè)置為0，結(jié)果是頁面一閃而過滾到指定位置，不是特別友好。我們想要...

littlelightss 2019-08-23 12:36 評論0 收藏0
DOM知識整理

摘要：繼承接口對象不僅實(shí)現(xiàn)了接口，也實(shí)現(xiàn)了接口，用來標(biāo)識當(dāng)前窗口內(nèi)的文檔節(jié)點(diǎn)。繼承接口描述了所有相同種類的元素所普遍具有的方法和屬性。由于工作中一直在用框架來解決問題，在平時對dom的關(guān)注也比較少（特別像angular這種自己封裝了一層視圖層的框架，并不建議直接操作DOM），所以dom相關(guān)的知識也忘的差不多了,這次做公司產(chǎn)品的官網(wǎng)，沒有太多的交互和功能，直接用了原生js，正好借此整理一下遺...

huayeluoliuhen 2019-08-23 13:51 評論0 收藏0
MUI框架開發(fā)HTML5手機(jī)APP(二)--頁面跳轉(zhuǎn)傳值&底部選項卡切換

摘要：三底部選項卡切換頁面底部選項卡的切換，可以說是的標(biāo)志之一。兩種模式的顯示效果差不多，如下圖可見兩種模式的區(qū)別顧名思義，模式是將所有子頁面的內(nèi)容，分別放置到主頁不同的中，當(dāng)我們點(diǎn)擊主頁的不同選項卡時，切換不同的顯示。概述 JRedu 　　在上一篇博客中，我們學(xué)習(xí)了如何使用Hbuilder創(chuàng)建一個APP，同時如何使用MUI搭建屬于自己的第一款A(yù)PP，沒有學(xué)習(xí)的同學(xué)可以戳鏈接學(xué)習(xí)： http...

番茄西紅柿 2019-04-23 13:37 評論0 收藏0