页面滚到到指定位置,元素的绝对定位和相对定位的自由转换

var $goTop = $("#goTop");  //需要操作的对象
$(window).scroll(function(){
  var scrollHeight = $(window).scrollTop();//这个方法是当前滚动条滚动的距离
  var height = $("body").height() - scrollHeight - $(window).height() + $goTop.height();//整个页面的高度-滚动条的高度-当前窗口的高度 + 按钮的高度。得到的是按钮距离页面最底部的距离  == document.documentElement.scrollTop+document.body.scrollTop;(原生方法)
  

  if(height < 204 ){  //204为指定位置
    $goTop.stop().css({"bottom":"50px","position":"absolute"});
  }else{
    $goTop.stop().css({"bottom":"40px","position":"fixed"});
  }
  if(scrollHeight > $(window).height() ){  //判断条件是否成立
    $goTop.stop().show();
  }else{
    $goTop.stop().hide()
  }
});
$goTop.click(function(){
  goTop();
}); 
时间: 2024-11-12 06:36:12

页面滚到到指定位置,元素的绝对定位和相对定位的自由转换的相关文章

3、第3课CSS块级、行内元素、绝对定位、相对定位、固定位置20150922

1.块级元素 A:特点: A.1默认显示在父标签的左上角 A.2块级元素默认占满一行(占满整个文档流) B:常见的块级元素 P   h1--h6   ul  li    ol  li   div  hr    table 2.行内元素(内联元素) A:常见的=行内元素有 a  span  img   input B:行内元素的特点 B.1 大小受到文字区域影响,不受width  height 影响 B.2 行内元素不会单独占满一行 3. 行内元素和块级元素相互转换 A:  行内元素转换成块级元素

js 页面滚动到指定位置

项目中,本来想通过点击左侧列表让页面进行快速导航(根据 id="item" 和 a标签的 href 属性[<a href="#item"></a>]),不过滚动后的页面一直是顶在浏览器页面顶部的,不符合项目需求,所以就通过 js 代码让页面进行指定位置滚动,代码如下: $(".left_nav>ul>li").click(function () { var n = parseInt($(this)[0].id)

如何在同一页面内实现指定位置跳转

今天刚学到的一个小知识点,分享一下 首先在“点击位置”的<a>标签内将href设置为href="#提供名字" 然后在要跳转到的位置的<a>标签内将name设置为上面href设置的名字,如name="提供名字" 称之为“锚点”. 以后学习到其他的方法,再补充.

页面滚动到指定位置

在chrome中使用body滚动: $("body").animate({"scrollTop":200},600) 但是在firefox中却要使用html: $("html").animate({"scrollTop":200},600) 综合一下,这样就都可以滚动了(其他浏览器也没问题): $("html,body").animate({"scrollTop":200},600)

监听页面滚动及滚动到指定位置

两种监听页面滚动的方法 一.原生js通过window.onscroll监听window.onscroll = function() {//为了保证兼容性,这里取两个值,哪个有值取哪一个//scrollTop就是触发滚轮事件时滚轮的高度var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;console.log("滚动距离" + scrollTop);} 二.Jquery通过$(wind

用JS将页面定位到某个位置(DIV)

使用Javascript自动将页面滚动到指定位置 下面我们就来讲解一下如何使用Javascript自动将页面滚动到指定位置. 指定需要滚动的位置 这一步很简单,就是需要给滚动到指定位置的元素加上id属性,如下: 天一广场 使用Javascript自动将页面滚动到指定位置 脚本如下:  这就完成了我们的需求,经测试兼容所有主流浏览器. 我也查阅了网上的一些资料,有的朋友说还有如下方式实现: 我也对上面的方法进行了测试,发现使用javascript中的window.scrollBy()存在一个问题:

DIV内滚动条滚动到指定位置

相对浏览器,将指定div滚到到指定位置,其用法如下: $("html,body").animate({scrollTop: $(obj).offset().top},speed); ps:obj是需要定位的对象,speed是滚动的速度 然而如果需要相对某一个容器(称之div1),将其内部的div2滚动到相对div1的指定位置,用法如下: $("div1").animate({scrollTop: $("div2").position().top}

点击事件然后页面跳转到指定DOM元素的位置

设置一个函数,执行函数滚动条自动拖动,页面跳转到指定DOM元素的位置. 实现方式很简单,首先引入animatescroll.js文件(要先引入JQuery),然后 $('#id').animatescroll(); 即可调到指定DOM元素在页面的位置. 为方便可以编写一个函数,传入DOM元素的ID function jumpTo(id){ $("#"+id).animatescroll(); } 附animatescroll.js /* 使用方法: $("#id")

页面滚动到一定位置时才显示在指定位置上的元素的jquery代码

当前可视窗口的顶部到页面的顶部高度+可视页面的高度>元素的绝对高度+元素自身高度时,显示当前元素. 页面滚动到一定位置时才显示在指定位置上的元素! 将$(".timeline.animated .timeline-row")换成指定的选择器即可! (function() {  $(document).ready(function() {    var timelineAnimate;    timelineAnimate = function(elem) {      retur