jquery跟随屏幕滚动代码（jquery左右无缝滚动）

本篇文章给大家谈谈jquery跟随屏幕滚动代码，以及jquery左右无缝滚动对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、jquery 让DIV在规定的高度内随着页面滚动而滚动。
• 2、jquery刷新页面 自动滑动到页面某一位置怎么写？
• 3、如何让jquery动画效果在屏幕滚动到指定位置才执行
• 4、如何通过JQuery将DIV的滚动条滚动到指定的位置

jquery 让DIV在规定的高度内随着页面滚动而滚动。

!DOCTYPE html

html

head

meta http-equiv="Content-Type" content="text/html; charset=UTF-8"

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

script

$(function () {

var maxHeight = 1500;//跟随滚动条最大高度

var marginTop = 0;//距离顶部的间距

$('#title').css('top', marginTop);

$(window).scroll(function() {

var scrollTop = $('body').scrollTop();

if(maxHeight  scrollTop + marginTop  $('#title').css('position') == 'fixed') {

$('#title').css('position', 'absolute').css('top', scrollTop + marginTop);

} else if (maxHeight = scrollTop + marginTop  $('#title').css('position') == 'absolute') {

$('#title').css('position', 'fixed').css('top', marginTop);

}

});

});

/script

/head

body style="height: 3000px;"

div id="title" style="width: 99%; height: 50px; background: #C1C1C1; position: fixed; top: 0px;"我是浮动栏/div

/body

/html

给你HTML代码你试一下，我设定的是body高度3000，在1500的地方停止跟随滚动条

jquery刷新页面 自动滑动到页面某一位置怎么写？

需要准备的材料分别有：电脑、html编辑器、浏览器。

1、首先，打开html编辑器，新建html文件，例如：index.html，并引入jquery。

2、在index.html中的script标签，输入jquery代码：

var container = $('body');

var scrollTo = $('#scroll');

container.scrollTop(

scrollTo.offset().top - container.offset().top + container.scrollTop()

);

container.animate({

scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop()

});

3、浏览器运行index.html页面，此时刷新页面会自动滑动到指定位置。

如何让jquery动画效果在屏幕滚动到指定位置才执行

1、新建一个html文件，命名为test.html。

2、在test.html文件内，使用div标签创建一个模块，并设置其id为mycss。

3、在css标签内，定义div的样式，设置其宽度为100px，高度为2000px，背景颜色为粉红色。

4、在js标签内，使用scroll()方法监听页面的滚动条，并执行function方法。

5、在function方法内，使用if语句判断，当前滚动的位置（scrollTop()）是否到达页面的底部（$(document).height()-$(window).height()），如果到达页面底部，提示“已经到底部了”。

如何通过JQuery将DIV的滚动条滚动到指定的位置

一、Js代码：

onload = function () {

  //初始化

  scrollToLocation();

};

function scrollToLocation() {

  var mainContainer = $('#thisMainPanel'),

  scrollToContainer = mainContainer.find('.son-panel:last');//滚动到div id="thisMainPanel"中类名为son-panel的最后一个div处

  //scrollToContainer = mainContainer.find('.son-panel:eq(5)');//滚动到div id="thisMainPanel"中类名为son-panel的第六个处

  //非动画效果

  //mainContainer.scrollTop(

  //  scrollToContainer.offset().top - mainContainer.offset().top + mainContainer.scrollTop()

  //);

  //动画效果

  mainContainer.animate({

    scrollTop: scrollToContainer.offset().top - mainContainer.offset().top + mainContainer.scrollTop()

  }, 2000);//2秒滑动到指定位置

}

二、Html代码：

div id="thisMainPanel" style="height:200px;overflow-y: scroll;border:1px solid #f3f3f3;"

    div class="son-panel"我是类容区域-1/div

    div class="son-panel"我是类容区域-2/div

    div class="son-panel"我是类容区域-3/div

    div class="son-panel"我是类容区域-4/div

    div class="son-panel" style="height:160px;"我是类容区域-5/div

    div class="son-panel"我是类容区域-6/div

    div class="son-panel"我是类容区域-7/div

    div class="son-panel"我是类容区域-8/div

/div

jquery跟随屏幕滚动代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于jquery左右无缝滚动、jquery跟随屏幕滚动代码的信息别忘了在本站进行查找喔。