jquery點選滾動條滑動到某個位置
對於錨點的平滑跳轉,我覺得要謹慎使用,在個人站點或是這個效果含有功能提示可以用一用,在一般的商業性質的網站上,權衡來講,不用更好,當然,這只是我的個人意見。jQuery庫已經為我們做了很多的工作了,所以,在jQuery下實現錨點的平滑跳轉是簡單輕鬆的。例如,我們要讓頁面平滑滾動到一個id為box的元素處,則jQuery程式碼只要一句話,如下:
$("html,body").animate({scrollTop: $("#box").offset().top}, 1000);
其中animate為jQuery自定義動畫方法,$(“#box”).offset().top表示id為box的jQuery物件距離頁面頂部的偏移值,1000表示平滑動畫執行的時間為1000毫秒,也就是1秒。
為了直觀的表示效果,我做個個簡單的demo頁面。您可以狠狠地點選這裡:錨點平滑跳轉demo
點選下圖所示文字連結,就可以看到平滑跳轉效果了:
相關推薦
jquery點選滾動條滑動到某個位置
對於錨點的平滑跳轉,我覺得要謹慎使用,在個人站點或是這個效果含有功能提示可以用一用,在一般的商業性質的網站上,權衡來講,不用更好,當然,這只是我的個人意見。jQuery庫已經為我們做了很多的工作了,所以,在jQuery下實現錨點的平滑跳轉是簡單輕鬆的。例如,我們要讓頁面平
jquery 點選元素後,滾動條滾動至該元素位置
點選元素後,滾動條滾動至該元素位置: $('a.lead-link').bind('click', function(e) { e.preventDefault(); $('html,body').animate({ scrollTop: $(this.
jQuery 監聽滾動條位置
滾動條事件 // 實時監聽元素的滾動事件 $(window).scroll(function(){ ... }); $(window).scrollLefft(); // 獲取滾動條位置 $(window).scrollTop(); $(window).scrollTop(200); //
移動端導航條點選一個欄目滑動到螢幕中間
HTML <ul class="tab-head"> <li class="tab-head-item active">衣服</li> <li class="tab-head-ite
點選導航,滑動到網頁中的指定位置(JS實現滑動錨點定位)
在一個網頁頁面中,可能會分為很多的模組內容,當我點選導航欄的某一項時,希望顯示對應的內容,例如,點選下圖導航中的報告服務後,希望網頁滑動到 “報告服務” 的模組,點選城市品牌滑動到“城市品牌”的模組。
jQuery實現頁面滾動條自動滾動到需要的位置
程式碼如下: <script> $(function(){ $('html,body').animate({scrollTop:1000},'slow'); }) </script> 解讀程式碼:在載入html頁面的body
jquery實現點選步驟條變色,以及點選下一步變色
最近做專案需要用到步驟條,看了很多不是自己想要的,就借鑑了一下別人的,然後自己總結了一下,感覺可以用到很多專案上使用了。下面是同種風格的步驟條,兩種變色方案: 1.先引入jquery的js <script src="jquery.min.js" type="
jquery點選一組相同的class裡的某個 新增或移除class
$(".class").click(function(){ $(this).siblings().removeClass("partner_group_click");//siblings是迴圈遍歷 $(this).addClass("par
移動端列表,點選某條記錄,進入詳情頁,返回時定位在剛才點選的位置
@[列表返回|minirefresh|cookie|sessionStorage] 背景 前不久做一個類似電商的h5專案,產品經理有個業務需求:使用者在商品列表,點選某一條商品的時
jQuery點選滑動並修改圖示樣式
//點選滑動改變圖示 $(document).ready(function() { $(".show").click(function() { $(this).next().slideToggle
jquery.nicescroll完美滾動條使用方法
del 設置 enables 調用 上進 pad ref esc lec jquery.nicescroll完美滾動條使用方法(轉) 配置參數 :當調用“niceScroll”你可以傳遞一些參數來定制視覺方面: cursorcolor - 十六進制改變光標顏色,默認值是
js控制滾動條滑動
控制 cnblogs htm space window www. 滾動 span targe window.scrollTo(0,document.body.scrollHeight);或者通過設置Location的hash屬性參見:http://www.cnblogs.c
jquery判斷頁面滾動條(scroll)是上滾還是下滾,且是否滾動到頭部或者底部
js代碼 文章 重復執行 關於 收藏 mage src start http webtouch(webapp)頁面,防蘋果手機safari瀏覽器,網上滑動,底部導航消失,滑動到底部又出現。向下滑動,底部導航出現。 遇到問題 1、我一開始用swipeup和swipe
JS 原生JS 判斷滾動條滑動到底部(兼容蘋果safari)
sco [0 dex start listener last eight ast pan ListenerScoller () { var pageIndex = 1; var startX, startY; document.addEven
結合錨點利用滾動條監聽跳轉
關於 家居 col eat span tom odi ack 分享 每一個錨點都相當於一個完整的模塊,正好占滿一個屏幕,滾動可以直接跳轉錨點, <body> <!--頭部開始--> <div id="header">
jq點選導航頁面滑動到對應內容
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
使用jQuery實現瀏覽器滾動條返回頂部功能
<!DOCTYPE html> <html ng-app="app"> <head> <meta charset="utf-8"/> <title ng-bind="title">使用jQuery實現返回頂部功能</ti
頭部導航,使點選一個欄目滑動到螢幕中間--多用於移動端
HTML程式碼: <ul class="tab-head"> <li class="tab-head-item active">心理諮詢師</li> <li class="tab-head-item"&g
使用jQuery控制頁面滾動條上下滾動
1.向上滾動 $(this).animate({ scrollTop: "-=50" }, 1000); 2.向下滾動 $(this).animate({ scrollTop: "+=50" }, 1000); 引數解讀
vue.js右鍵點選事件+在游標停靠位置插入文字
直接在需要右鍵效果的新增 @contextmenu.prevent='function' function寫自己的程式碼 另外,專案中用到在游標停靠位置插入文字的功能,一併描述一下 insertShort(index) { this.contextmenuShow = fal