前端外掛之錨點動畫跳轉

阿新 • • 發佈：2019-01-19

1.js程式碼

<script type="text/javascript">
  jQuery(document).ready(function($) {
   $(".index_nav li a").click(function(event) { 
      var index=this.title
      var id='#'+'index_'+index
     $("html,body").animate({scrollTop: $(id).offset().top}, 1000);
   });
   $(".taoba").click(function(event) { 
      var index=this.title
      var id='#'+'index_'+index
     $("html,body").animate({scrollTop: $(id).offset().top}, 1000);
   });
   function a(x,y){
    l = $('#main').offset().left;
    w = $('#main').width();
    $('#tbox').css('left',(l + w + x) + 'px');
    $('#tbox').css('bottom',y + 'px');
		}//獲取#tbox的div距瀏覽器底部和頁面內容區域右側的距離函式#main為頁面的可視寬度
		$(function() {  
		    $(window).scroll(function(){
		    t = $(document).scrollTop();
		    if(t>500){
		      $('#tbox').show();
		    }else{
		      $('#tbox').hide();
		    }
		    if(t > 50){
		        $('#gotop').fadeIn('slow');
		    }else{
		        $('#gotop').fadeOut('slow');
		    }       
		})   
		    a(10,100);//#tbox的div距瀏覽器底部和頁面內容區域右側的距離
		    $('#gotop').click(function(){ 
		        $('body,html').animate({
		            scrollTop: 0
		        },
		        800);//點選回到頂部按鈕，緩懂回到頂部,數字越小越快
		        return false;  
		    })
		});
  });
</script>

2.html程式碼

<body>
<div class="indexnav_wrap">
  <ul class="index_nav">
    <li><a href="javascript:void(0)" title="1"><i>活動</i><strong>1</strong></a></li>
    <li><a href="javascript:void(0)" title="2"><i>活動</i><strong>2</strong></a></li>
    <li><a href="javascript:void(0)" title="3"><i>活動</i><strong>3</strong></a></li>
    <li><a href="javascript:void(0)" title="4"><i>活動</i><strong>4</strong></a></li>
    <li><a href="javascript:void(0)" title="5"><i>活動</i><strong>5</strong></a></li>
  </ul>
</div>
<div class="h50"></div>
<div class="row" id="main">
  <h2 id="index_1">這是第一個活動頁</h2>
 
  <div class="mainpage mainpage1">
    </div>
 
</div>
<div class="h15"></div>
<div class="row">
  <h2 id="index_2">這是第二個活動頁</h2>
 
  <div class="mainpage mainpage2">
   
    </div>
 
</div>
<div class="h15"></div>
<div class="row">
  <h2 id="index_3">這是第三個活動頁</h2>
 
  <div class="mainpage mainpage3">
   
    </div>
 
</div>
<div class="h15"></div>
<div class="row">
  <h2 id="index_4">這是第四個活動頁</h2>
 
  <div class="mainpage mainpage4">
   
    </div>
 
</div>
<div class="h15"></div>
<div class="row">
  <h2 id="index_5">這是第五個活動頁</h2>
 
  <div class="mainpage mainpage5">
   
    </div>
 
</div>
<div id="tbox"><!-- 這個必須有  id="tbox"-->
    <a class="taoba" href="javascript:void(0)" title="1">1</a>
    <a class="taoba" href="javascript:void(0)" title="2">2</a>
    <a class="taoba" href="javascript:void(0)" title="3">3</a>
    <a class="taoba" href="javascript:void(0)" title="4">4</a>
    <a class="taoba" href="javascript:void(0)" title="5">5</a>
    <a id="gotop" href="javascript:void(0)" title="回到頂部">回到頂部</a> <!-- 這個也是id="gotop"  -->
</div>
</div>
</body>

3.css部分

@charset "utf-8";
/* CSS Document Download by http://www.codefans.net*/
.gray {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
}
/* reset */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, p , form, fieldset, legend, input, button, textarea, th, td {
    margin:0;
    padding:0;    
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
fieldset, img {
    border:0;
}
ul,li {
    list-style:none;
}
body {
    background: #f1f1f1;
    color: #666;
    font:12px/1.7 Helvetica,Arial,Tahoma,sans-serif,"\5B8B\4F53";
}
.row:after {
    clear:both;
    content:'\0020';
    display:block;
    height:0;    
}
.row {
    zoom:1;
}
/*連結顏色*/
a,button{outline:none; /*移除虛線框  IE8,FF有用*/ hide-focus: expression(this.hideFocus=true); /*IE6、IE7*/}
a{
    color:#999;
    text-decoration:none;
}
a:hover{
    color:#be0000;
    text-decoration: underline;
}
.fst{
    font-family: "\5B8B\4F53";
}
h1,h2,h3,h4,h5,h6{font-family:\5FAE\8F6F\96C5\9ED1; font-size: 16px;}
/* end reset */
.row{
    width:1000px;
    margin:0 auto;
}
/*模板頭部，所有專題頁面公用*/
.index_nav{width:575px; height: 70px; margin: 0 auto; padding-left: 5px; background: #fff;}
.index_nav li{width: 115px; height: 70px; float: left;}
.index_nav li a{display: block; float: left; width: 70px;height: 70px; background:url(../images/index_nav.gif) 0 0 no-repeat; text-align: center; color: #e02800;}
.index_nav li a i{display: block; padding-top: 12px; height: 22px; line-height: 22px;}
.index_nav li a strong{font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 24px; display: block; height: 30px; line-height: 20px;}
.index_nav li a:hover{background-position: 0 -70px; color: #fff; text-decoration: none;}
.h15{height: 15px; overflow: hidden;}
.mainpage{width: 1000px; height:1000px;}
h2{font-size: 24px; text-align: center; color: #333; font-weight: bold;}
.mainpage p{width: 650px; margin: 0 auto; color: #fff; font-size: 16px; padding: 50px 0 50px;}
.mainpage1{background: #fe6400;}
.mainpage2{background: #be0000;}
.mainpage3{background: #ccc;}
.mainpage4{background: #0093dd;}
.mainpage5{background: #a8cf33;}
*html{background-image:url(about:blank);background-attachment:fixed;}/*低版本瀏覽器防止抖動的，必須有*/
#tbox{width:30px; height:200px; float:right; position:fixed; display: none;
_position:absolute;
_bottom:auto;
_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
_margin-bottom:50px;
}/*這個只能改寬高其他的不要修改，需要滾動的內容都要放在這個div裡面*/
.taoba{display:block; background:#c2c2c2; width:30px; height:30px; margin-bottom:4px;text-align: center; color: #fff; line-height: 30px; overflow: hidden;cursor:pointer}
.taoba:hover{background:#ff4200; text-decoration: none; color: #fff;}
#gotop{display:block; width:30px; height:30px; text-indent:-9999px; overflow: hidden; color: #fff; background:url(../images/top_icon.gif) no-repeat;  position:absolute; display:none; cursor:pointer} /*這個樣式隨便改，必須有position:absolute; */
#gotop:hover{background-position: 0 -30px;}

4.加一個

<script src="js/jquery.min.js" type="text/javascript"></script>

前端外掛之錨點動畫跳轉

1.js程式碼<script type="text/javascript"> jQuery(document).ready(function($) { $(".index_nav li a").click(function(event) {

HTML錨點控制,跳轉頁面後定位到相應位置

想在點選更多的頁面跳轉後使用者能看到的是新聞不用再用scollbar拖下來到新聞頁面這時候就需要在連結上做下處理 <a href="/article/list/page/1/13.html#view" class="titleMore f12"&g

解決錨點連結跳轉後位置上下偏移的偏移的辦法

應用場景：我們把導航固定在頁面頂部的時候，點選錨鏈接跳轉到相應的部分時，很可能導航把頁面的內容覆蓋了，像這樣導航把文字覆蓋了，原因就是我們設定了padding這類css屬性正常盒模型的寬度：width=width+padding+border,其實就是導航蓋住了盒

天貓，京東各大網站錨點的跳轉

// 點選導航 <div class="left_bar" style=""> <a class="bar_one" href="#s_1"><span class="bar_span">網店</span><span c

前端超級好用a標籤跳轉帶錨點效果

<div class="nav"> <ul> <li><a href="1.html" class="hover"> 首頁</a></li> &

html錨點點擊跳轉到頁面指定位置

刷新 mlp kml fwe dpf sil ava vlm pyc 本來是在看阮大神寫的ajax教程，突然發現點擊目錄文字會跳轉到相對應的文本內容，於是乎激發了我的興趣。這個究竟怎麽做的，剛開始看的時候一知半解，找度娘就是：“點擊跳轉到頁面指定位置”，找了下，原來專業術

前端外掛之滾動條——jquery.nicescroll【轉】

轉自：http://www.cnblogs.com/jinqi79731/p/nicescroll.html Nicescroll是一款基於jQuery的滾動條外掛，可以定製化滾動條，呼叫簡單方便，相容各主流瀏覽器和移動端裝置。引入核心檔案，外掛需要引入1.5.X以上版本的jquery庫最簡單的用

【React】錨點效果實現（點選跳轉定位位置）（內含demo）

錨點：超連結的一種形式，快速定位到想要看的位置，常用在文章目錄等位置。那麼問題來了React不支援原生錨點的書寫方式所以怎麼在React裡實現類似錨點的效果我的解題思路1.在 url裡使用 anchor 引數2.頁面解析是否有anchor引數對應的id3.有對應id的話

糊糊的前端學習筆記——a標籤點選跳轉頁面後，為被點選的a標籤新增樣式【Day1】

本人前端小白一枚，初步接觸前端知識一個月。從今天開始將在部落格上分享一下我每日工作中遇到的一些問題和相應的解決，以幫助自己更好的學習和成長。今天在製作網頁頂部公共導航時，遇到這樣一個問題，我需要在a標籤點選跳轉頁面後，為被點選的a標籤新增樣式。增添樣式如下：.selec

apicloud 點擊跳轉頁面

png nbsp function script click type img 聯系 owin <div class="lianxi"> <button onclick="opnew()">聯系商家</button> <

【XSS】之錨點

eval 源碼 div rip function 函數 settime cati ash 今天P師傅發了一個XSS鏈接，讓利用一下，源碼如下 <script type="text/javascript"> var x=location.hash; funct

iOS開發之應用間相互跳轉

gpo 用戶隱私 spa container 下載 containe canopen itunes cep 1. 應用間相互跳轉簡介在iOS開發的過程中，我們經常會遇到需要從一個應用程序A跳轉到另一個應用程序B的場景。這就需要我們掌握iOS應用程序之間的相互跳轉知識。

『中級篇』docker之運行nginx跳轉到本地的jar並配置https（番外篇）（80）

ide 內部鏈接 class and format 環境 keepaliv file >原創文章，歡迎轉載。轉載請註明：轉載自IT人故事會，謝謝！>原文鏈接地址：『中級篇』docker之運行nginx跳轉到本地的jar並配置https（番外篇）（80）真實的

JQuery 之Ajax 的重跳轉頁面

//由於封裝之後的ajax，返回從資料庫得到的資料，此時想在這個地方完成頁面的跳轉將不支援，可以通過下面的方法（頁面的JS）間接完成需要跳轉的頁面 <script> $(".deleteSection").click(function(){ 　　let con

小程式根據ID點選跳轉到不同頁面

1.在小程式裡建立兩個頁面 2.在第一個頁面wxml用display：flex彈性盒子寫頁面佈局 <view style='display:flex;flex-wrap:wrap;'> <image wx:for="{{list}}" wx:key src='

小程式點選跳轉外部連結，計算問題，後臺解密獲取更多使用者資訊

使用場景：小程式上體點選圖跳轉廣告（百度這種連結）直接上程式碼： index.wxml  <view wx:for="{{nav}}" wx:key="{{item}}"> <i

小程式開發資訊公告輪播及點選跳轉

給大家展示一個簡單的資訊公告輪播，及其點選後跳轉，效果如下： wxml <swiper class="swiper_container" vertical="true" autoplay="true" circular="true" interval="2000">

Struts框架之結果頁面的跳轉

1. 結果頁面存在兩種方式 * 全域性結果頁面（有很多時候我們會跳轉到同一頁面，所以我們可以配置一個全域性結果頁面，不管什麼情況都會跳轉到這個頁面） > 條件：如果<package>包中的一些action都返回success，並且返回的頁面都是同一個JSP頁面，這樣就

ionic3伺服器請求新聞列表資訊以及點選跳轉詳情

一、首先引入請求，傳送門：https://blog.csdn.net/weixin_41404460/article/details/83110952 二、使用腳手架新建一個列表頁和一個詳情頁，在列表page頁中寫入以下程式碼： <ion-list> <

【前端】繫結手機號跳轉到“下一步”

前言小編最近在做專案時遇到一個功能，使用者A在下單買東西時，前提條件有兩個：必須是登陸狀態，必須是有手機號資訊（在微信方式等其他方式登陸時，沒有手機號資訊）。跳轉“繫結手機號頁面”成功之後，需要跳轉到下單的“下一步”。實現思路的難點一、如何跳轉到下一步

前端外掛之錨點動畫跳轉

相關推薦