1. 程式人生 > >點選錨點平滑滾動效果

點選錨點平滑滾動效果

獲取a的href的錨點連線target,通過
targetOffset=$(target).offset().top; 獲取該錨點到瀏覽器頂部的距離,然後給body新增動畫
$('html,body').animate({
        scrollTop: targetOffset
    },
1000);
全部程式碼:
/*錨點動效*/
$('a[href*=#],area[href*=#]').click(function() {
   if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this
.hostname) { var $target = $(this.hash); $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']'); if ($target.length) { var targetOffset = $target.offset().top; $('html,body').animate({ scrollTop: targetOffset }, 1000); return false
; } } });

相關推薦

平滑滾動效果

獲取a的href的錨點連線target,通過 targetOffset=$(target).offset().top; 獲取該錨點到瀏覽器頂部的距離,然後給body新增動畫 $('html,body').animate({ scrollTop: target

jq實現跟隨滑鼠移動的下劃線效果

效果如下: 1.html程式碼:   1 <div class="center-left-tap"> 2 <a href="javascript:void (0)" style="color: #1c1c1c;" class="current" oncli

JavaScript ----事件 * 圖片改變圖片路徑,達到開關燈效果

  <!DOCTYPE html> <html> <head lang="en">     <meta charset="UTF-8">     <title></tit

顯示,再次除自身外隱藏效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <

ripple實現時的水波紋效果

前言 在看網易雲音樂播放器的時候,覺得它在選擇音樂時候的波紋效果很好看,就想要模仿這種效果。然後在網上找了一下這方面的文章,最後被我發現了ripple,用ripple就能很好地實現這種波紋效果。所以用這篇文章記錄下ripple的實現,如果發現我的程式碼有問題,

JavaScript ----事件 * 圖片改變圖片路徑,達到開關燈效果

<!DOCTYPE html> <html> <head lang="en">     <meta charset="UTF-8">     &l

ionic-css3實現水波漣漪的觸覺效果

這兩天有時間就繼續在ionic的框架上利用angularjs實現一些在app中經常用到的觸覺漣漪效果,基於material design,給人友好互動感覺。 一、點選一些在頭部或者底部的圖示時。產生漣

Android 去掉控制元件的瞬間的波紋效果

使用appcompat_v7是應用相容包時,出現app點選控制元件會有水波紋效果,如需要去掉appcompat_v7預設的效果 只需在使用的app主題里加上如下設定: <item na

jquery 元素後,滾動滾動至該元素位置

點選元素後,滾動條滾動至該元素位置: $('a.lead-link').bind('click', function(e) { e.preventDefault(); $('html,body').animate({ scrollTop: $(this.

vue的類似標籤頁的效果

一,這是兩個點選事件,定義相同的名稱,點選不同的i,會展示下面不同的div <div> <i class="el-icon-tickets" style="font-size: 28px; color:#2D87F9;" @click = "showlL

移動端calendar日曆開發+swiper(支援左右,滑屏滾動

前段時間也做了一個日曆專案,不過依賴於jQuery,最近這個專案要求用原生js,便又重新封裝了下;先看效果圖:html: <div class="uzai-header"> <i class="iconfont icon-back" n

JQuery事件回到頁面頂部效果

//2個div,點選某個時回到頂部 <div style="height:1000px">111111111111111</div>  <div id="top" >top</div> <引用JQuery> <

Html按鈕上下逐條滾動,外層div不遮擋內層div內容

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

Android 5.0 Material Design的實現任意View的水波效果

引用MaterialLayout工程或者將程式碼和attrs.xml拷貝到你的工程中,然後在你的佈局xml中新增MaterialLayout佈局,注意,不要忘了引用MaterialLayout自定義屬性的名稱空間,即下面的xmlns:ml這句。把com.example.materialdemo替換成你的包名就

實現Android 5.0 Material Design的任意View的水波效果

我正在參加部落格之星,點選這裡投我一票吧,謝謝~   前言自從Android 5.0問世以後,它的UI風格受到了大家普遍的讚美,簡單、動感十足,但是由於工作比較忙,本人對於Android 5.0並沒有太多的關注。前幾天在知名博主任玉剛 (  部落格地址 ) 帥哥的群中有同學問

Android瀏覽圖片,放大至全屏效果

最近做一個專案類似於QQ空間,做到照片瀏覽的功能,對於QQ空間中點選圖片放大至全屏,感覺效果很贊,於是也做了個類似的效果。如下。 我不知道QQ那個是怎麼做的,我的思路如下: 首先,從圖片縮略介面跳轉到圖片詳情頁面,應該是從一個Activit

按鈕實現遮罩效果

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD>  <TITLE> New Document </TITLE> 

攜程在手小按鈕縮放效果與自定義按鈕效果

   攜程在手點選小按鈕縮放效果思路很簡單,點選按鈕寫一個縮放動畫效果,延遲0.5m,接著進去相應的activity中。   1、在layout下建一個anim資料夾,寫一個set的set_scale.xml動畫,如下 <?xml version="1.0" enco

js按鈕載入更多效果

單個列表效果 1,把你要分面顯示的內容的容器元素增加一個class=showMoreNChildren,並增加一個自定義屬性pagesize="8" 這種 這個pagesizie有一個預設值10。可以不寫如 <ul class="showMoreNChildren"

js實現無縫滾動可實現左右滾動

<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>無縫滾動——左右</title> <st